Superfish navbars are great, but when you are looking at the rightmost tab, the second tier navbar starts at the far left. So if there are only a few tabs, it looks off-center and the user has to mouse all the way to the left. How can you center the tabs inside the superfish navbar?
Never mind, found the appropriate line to change in the css:
.sf-navbar > li > ul > li {
float: left;
}
Related
I need help with bootstrap navbar collapse. When I click the burger menu, there is less than a second lag before it fully expands. Also, if you click very fast, like multiple clicks on the burger icon, the x icon animation gets delayed, and the x becomes the closed icon rather than the burger icons, which is frustrating because I like to have a bit of delay with my nav collapse. please check my link below for a live version :
My website link
So basically I added ul to the nav-collapse so now its .navbar-collapse ul { height: 100vh; } so the solution is to set the height of the ul to 100vh, not the height of the whole navbar-collapse.
So I'm making a minor button and navigation kit in terms of learning more HTML and CSS responsiveness. Navigation is my weak point and I've come to my first problem that I can't get my head around.
https://jsfiddle.net/ku0wezws/3
If you scroll to the bottom of the CSS, you'll find the subnav implementation and what I'm trying to achieve is to align all the content in the center when you hover over About. You'll notice that it has just aligned one after the other side by side. My aim is to center all of that normally, going all the way down. Like this: http://www.w3schools.com/howto/howto_js_dropdown.asp
Am I being really stupid? I think I am. What should I adjust in the CSS to make this happen?
Thank you.
Edit:
Edited the JSFiddle
Add this to prevent the li items of that submenu to float next to each other:
.jkit-subnav li {
float:none;
}
https://jsfiddle.net/yhkuv138/
Just clear the float from .jkit-nav-inverse ul li ul li.
Add below code to the end of your CSS.
.jkit-nav-inverse ul li ul li{
clear: both;
}
Updated fiddle
Im coding this design on wordpress: http://ft.webmode.lt/
And i got stuck on top sub-meniu floating. When you hover on first menu item the sub-menu floats normal from left, when hover second menu item the sub menu starts from that menu item who is child.
How to make submenu always float from left?
My code i use now: http://pastebin.com/sTt4wB2b
DONE
I just remove position:relative; from header .top-meniu ul li and add it to header .top-meniu ul
You can do it the following way using css:
.select-submenu-wrappers {
left: 0;
right: auto;
}
This seems like a fairly straightforward thing but can't find any tutorial on it.
I have a top menu that changes background colour then one of the menu items is selected. The CSS looks like this:
.nav > li > a:hover,
.nav > li > a.selected {
background-color: #F7A379;
}
However some pages have a side menu, with a class .left-nav and when I click on those links the background styling disappears from the parent nav. Is it possible to keep the styling above when the child page is selected? If so, what would the CSS need to be?
I am not sure of how to get this to work, I have a Drop Down Menu that is cross browser compatible and I am trying to have the selected "bread crumb" menus system keep the arrows on the :hover style when I am on child menus. As you can see from the link here:
http://www.seth-duncan.com/Test/TestMenu.html
When I go to child menu items the menu reverts back to the blue arrows, when I need them to keep the hover style white arrows.
Any help ?
Thanks
Move
background:#A5CF8C url(images/DownArrow.png) no-repeat scroll right center;
from
#menu li a.sub:hover
to
#menu li:hover a.sub