The goal is a fixed navbar which can include dropdowns for menu items. Additionally, I am trying to left-adjust the Home menu item, center the main menu and right-adjust the search.
Outstanding issues are:
centering the main menu
the dropdown from Home appears a few pixels below the navbar and it becomes impossible to reach the menu items.
the menu items are wrapped at the length of “Home” instead of allowing for the full length of menu items.
technically, I am not sure a drop-down from the main menu would behave correctly once it is centered without additional code.
I am not sure what needs to be done to make this menu work on small screens
CSS for navbar:
#NavBar {
background: #780000;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
position:fixed;
top:0;
width:100%;
z-index:1001;
}
nav {
height:2em;
z-index:1002;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
margin:0;
padding: 0 20px;
}
nav ul#NavHome {
float:left;
}
nav ul#NavMain {
text-align:center;
float:none;
}
nav ul#NavSearch {
float:right;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
font: 120% 'Uncial Antiqua', serif;
}
nav ul li:hover {
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
display: block;
padding: 0px 10px;
color:#F1D9B3;
text-decoration: none;
}
nav ul li a:hover {
color:#F4E1C4;
text-decoration:underline;
}
nav ul ul {
display: none;
background: #000000;
margin:0;
padding: 0;
position: absolute;
top: 2em;
}
nav ul ul li {
float: none;
font: 90% 'Alegreya SC', serif;
position: relative;
}
nav ul ul li a {
padding: 15px 10px 15px 10px;
color:#F1D9B3;
text-decoration: none;
}
nav ul ul li a:hover {
color:#F4E1C4;
text-decoration:underline;
}
HTML:
<div id="NavBar">
<nav>
<ul id="NavHome">
<li><a href="#">Home</a>
<ul>
<li><a href="http://asoiaf.westeros.org/">A Forum of Ice and Fire</a></li>
<li><a href="http://awoiaf.westeros.org/">A Wiki of Ice and Fire</a></li>
<li><a href="http://www.westeros.org/GoT/">Game of Thrones</a></li>
<li><a href="http://www.westeros.org/Citadel/">The Citadel</a></li>
<li><a href="http://www.westeros.org/BoD/">Blood of Dragons</a></li>
</ul>
</li>
</ul>
<ul id="NavMain">
<li><a href="http://www.westeros.org/News/">News</a></li>
<li><a href="http://www.westeros.org/Catalogue/">Catalogue</a></li>
<li><a href="http://www.westeros.org/Store/">Store</a></li>
<li><a href="http://www.westeros.org/Links/">Links</a></li>
<li><a href="http://www.westeros.org/Gallery/">Gallery</a></li>
</ul>
<ul id="NavSearch">
<li><a href="#">Search</a>
</li>
</ul>
</nav>
</div>
I am away on holiday at the moment so can only offer brief hints for the following:
I believe simply applying text-align:center to nav will do the trick.
#NavBar .nav{text-align:center}
You cannot have the submenu any distance away from the trigger otherwise the hover effect will be lost as soon as you move from the trigger. You wold usully set it to 100% by default.
e.g.
nav ul ul {top:100%}
Of course you should be using classes and not styling selectors directly because that will affect all navs with uls.
If you want some space under the trigger then add padding-top to the nested ul and remove the background from the nested ul and place it on the list instead. There must always be a connection between the trigger element and the nested ul and they must touch.
Use white-space nowrap to force the issue.
nav ul ul {white-space:nowrap}
If the trigger list items are position:relative the dropdown will be placed in relation to the centred item.
Also be careful that your menu is not too tall for the screen because if it is fixed then the user will be unable to scroll. You probably need to use media queries based on height to unfix the menu if the viewport height is not tall enough to accommodate the items.
You should collapse it into a hamburger or similar and then linearise the items to full width. You will probably need js to do this unless you keep all menu items open by default. Remember hover doesn’t work well on mobile or touch anyway so perhaps a click dropdown would be better to start with.
Getting all of the above correct and working across all browsers is no simple matter and needs a lot of work to accomplish as there is a lot to consider.
Unfortunately I m away for another couple of weeks and don’t have the resources here to help so someone else will have to jump in with the finer details
Thank you. I can at least solve the initial alignment issues this way, then I will have to see about getting it all to work on various screens.
Oh, and I had used nav instead of selectors because I am not expecting to use nav anywhere else than for the main navigation, though maybe selectors would make it clearer anyway.
