I have a basic Bootstrap navbar here
What I want to do is this:
(Navbar)
-----Logo------Item----Dropdown----------------------------Login/Signup-----
(Dropdown menu)
-----Sub-item----Sub-item----Sub-item---------------------------------------
On hover I want to make the dropdown menu show full width right underneath the navbar. The hover event isn't what I'm having trouble with, I'm having trouble positioning it correctly to be full 100% width.
Update
I see that bootstrap adds position: relative to .nav > li, when I take that off in Chrome developer tools it goes full width off the screen starting at the position of the navbar element.
Solution
Working Example
The solution to my example was overriding Bootstrap's .nav>li to position: static.
I now know that this is called a mega menu :)
I dont know exactly what you need if my thought is right you want this link , check with the bootstrap mega menu
click here
Related
Please help me to fix these issues in CSS (without JS). I am studying and can't find answers to some problems with navigation. Please don't blame me :)
I created navigation and first screen for the site but stumbled with these questions. Here is a screenshot with all things: https://prnt.sc/ln3ytx and my pen on Codepen: https://codepen.io/a007mr/pen/mQKyYM
How to make background hover for all line?
My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6;
but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
How to make navigation button in the corner for any desktop size? I am using
margin: 15px;
but it doesn't work well when I will make more screen resolution. It is not responsive. The button will not be in the right corner if I choose the larger desktop.
The same issue with all navigation. How to make a position for navigation
in one place for any desktop size?
How to open dropdown through click (not hover) and hide drop-down menu only through click? My code li:hover > ul. If I change on li:active > ul then drop-down menu appears only when I hold the button. How to make like *click button -> we show drop-down menu and can choose something -> *other click on "Learn more" and menu is hidden.
How to make margin for below the main button? :)
I wrote margin-top: 20px; but it doesn't work.
How to make the background of all navigation without margin?
What's wrong? How can I fix it? Please, help.
I will be try give you some reply:
How to make background hover for all line? My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6; but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
1) Try uses block elements. Remember that css property
display: block; makes your element a block element.
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
2) Your items in the list must be made as blocks and it item (li>a) need to be
increased.
Common example:
https://codepen.io/bear-wolf/pen/YRvoWO?editors=1100#0
I have a floating top navigation menu that I recreated # http://codepen.io/micsad/pen/mmzrZO
I made one menu item stand out by giving it a different background color with a CSS id.
#promonav {
background: gray;
}
It looks OK when you can see all the menu items in the browser, but resize the browser and #promonav item starts to jump around uncontrollably. It's no longer aligned with the top nav menu.
Is there anything I can do to:
a) keep the floating navigation fixed to the top of the page
b) stop the stand-out menu item with a different CSS class/id from jumping around on smaller desktop screens?
Thank you
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I've created menu drop down menu in pure css,
here, parent div have position:relative and the menu popup have position:absolute,
when the menu hovered the submenu will appear as display:block,
but here, hovering sarees (first menu) the popup menu appears perfectly, but hovering the last menu webmenus, the popup appers at wrong position (different position). The images uploaded below
I want to make the same position with all submenu popups like sarees's submenu popup have.
is there any css hack for this .. ?
Images :
I want this position for all menus
The menu Displaying at wrong position
I noticed that you are using position: relative to the menus, including the drop down menus. That is the why you are having this issue. You set the menu as absolute and it is understood as relatively to its respective parent. If you remove the position: relative it will set absolute position relatively to the page.
Update:
See a Fiddle HERE
and compare to this another Fiddle HERE
Did you see the difference?
Sorry if my english is bad
Remove position:relative; to each .menuTemplate1 li
That way the menu will open always on the left side, as your image shows.
I am currently making a drop down navigation bar for a website. I am having trouble with it because I wanted to stretch the navigation bar accross the whole screen right under the banner. I used width: 100%; to make it do so. But when I hover over the list and the drop down menu appears it stretches across the screen as well. It was because of the position being relevant. I changed it and when I did the drop down menu is white until you hover over one of the li in it.
http://codepen.io/anon/pen/FDrau
Is the link to what i'm working on. Can anyone show me how to fix it?