I am using bxslider for carousels and its below the navigation menu, when I hover over the menu to display the submenu, it displays but items below hide behind the images.I expected the submenu to be displayed infront of the images(as it works when images are not in a slide show).When I add multiple br tags between the menu and the image slider there is space for the submenu to be displayed but this is not what I want.
When the screen size is adjusted to mobile view there are no issues as I use slicknav.
Related
I want to put a side bar menu over the carousel when I hover the principal side bar using css I mean to consider the carousel as a background
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 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
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?
I created a css dropdown menu so my site will work with iphones. The dropdown is working correctly except for when you hover over a dropdown the sub items in the menu expand but when you hover over them the image on the main dropdown item looses it's color. I have it setup so that a different image is displayed when the mouse is hovering over it. Here is a link to pretty much the same code I have on my website. I just want the image to stay the same whether I am hovering over the main menu item or the subitems. Any help would be much appreciated.
http://jsfiddle.net/h5xZT/5/
To update your code it's simple. That should set you on your way. There is no need to use the "button" within a li item.
http://jsfiddle.net/h5xZT/19/