This is a two part question… I’m currently trying to get a navbar to work correctly inside my client’s crazy parameters.
in style.css:
.fl{float: left;}
/* 2.2 Navigation */
#navigation {
position: relative;
clear: both; margin-bottom: 3em; display: none;
font:14px/14px sans-serif;
border: 1px solid #d9d9d9;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
background: -webkit-linear-gradient(#ffffff, #f5f5f5);
background: -moz-linear-gradient(center top, #ffffff 0%, #f5f5f5 100%);
background: -moz-gradient(center top, #ffffff 0%, #f5f5f5 100%);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#navigation ul.rss { float: none; position: absolute; top: 10px; right: 9px; }
#navigation ul.rss li { display: block; margin: 0 0 10px 0; padding: 0; font-size: 1em; }
#navigation ul.rss li a { color: #555555; text-decoration: none; padding: 0; display: inline-block; position: relative; }
#navigation ul.rss li a:hover { color: #222; }
ul.nav li a { padding: .5em 1em; display: block; color: #666; }
ul.nav li a:hover { color: #222; }
ul.nav li.current_page_item a,
ul.nav li.current_page_parent a,
ul.nav li.current-menu-ancestor a,
ul.nav li.current-cat a,
ul.nav li.current-menu-item a { background: #ffffff; color: #3088ff; }
ul.nav li ul li a { background: none!important; color: #666!important; }
ul.nav ul li.current_page_item a,
ul.nav ul li.current_page_parent a,
ul.nav ul li.current-menu-ancestor a,
ul.nav ul li.current-cat a,
ul.nav ul li.current-menu-item a { color: #3088ff!important; }
#header .nav-toggle { text-align: center; display: block; margin: 2.5em 0 0; padding: 0.4em 1em; font-size: 1em; background: #999; border-radius: 3px; }
#header .nav-toggle a { color: #fff; }
#header .nav-toggle a:hover { color: #ccc; text-decoration: none; }
#top select { margin: 1.618em 0 0; width:100%; }
#top #top-nav { display: none; }
in layout.css
#navigation { display: block !important; }
#navigation ul li:first-child, #navigation ul li:first-child a { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; }
#navigation ul ul li:first-child, #navigation ul ul li:first-child a { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
#navigation ul.nav > li { border-right: 1px solid #e6e6e6; }
#navigation ul.nav > li a:hover { background: #f6f6f6; }
#navigation ul.nav > li:hover { background: #f6f6f6; }
#navigation ul.nav ul { background: #f6f6f6; border: 1px solid #e6e6e6; left: -1px; }
#navigation ul.nav ul ul { top: -1px; left: 100%; }
#top .nav li.parent > a { position: relative; padding-right: 2em; }
#top .nav li.parent > a:after { content: ""; display: block; border: .3em solid #ccc; border-color: #ccc transparent transparent transparent; position: absolute; top: 48%; right: .8751em; }
#navigation .nav li ul li.parent a { padding-right: 0; }
#navigation .nav li ul li.parent a:after { border-color: transparent transparent transparent #ccc; right: 0; top: 46%; }
#navigation .nav li.parent > a { position: relative; padding-right: 2em; }
#navigation .nav li.parent > a:after { content: ""; display: block; border: 0.3em solid #ccc; border-color: #ccc transparent transparent transparent; position: absolute; top: 48%; right: .8751em; }
#navigation .nav li ul li.parent a { padding-right: 0; }
#navigation .nav li ul li.parent a:after { border-color: transparent transparent transparent #ccc; right: 0.8751em; top: 46%; }
#header h3.nav-toggle { display: none; }
In custom.css:
#navigation { width: 70%; margin: -70px auto 70px auto; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { font-family: "LaPorteniadelaBocaRegular",serif; text-transform: capitalize; font-size: 16px; margin: -3px 0; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { font-family: "LaPorteniadelaBocaRegular",serif; text-transform: capitalize; font-size: 16px; margin: -3px 0; }
part of the page itself (added by WooTheme’s Canvas theme):
ul.nav li a, #navigation ul.rss a { font:bold 14px/1em 'Josefin Sans', arial, sans-serif;color:#FFFFFF; }
#navigation ul.nav > li a:hover, #navigation ul.nav > li:hover, #navigation ul.nav li ul {background-color:#70c8c6!important}
#navigation ul.nav li ul { border: 1px solid #FFFFFF; }
#navigation ul.nav > li { border-right: 0px solid #dbdbdb; }#navigation ul.nav > li > ul { left: 0; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { background-color:transparent; }
#navigation ul.nav li.current_page_item a, #navigation ul.nav li.current_page_parent a, #navigation ul.nav li.current-menu-ancestor a, #navigation ul.nav li.current-cat a, #navigation ul.nav li.current-menu-item a { color:#ffffff; }
#navigation ul li:first-child, #navigation ul li:first-child a { border-radius:0px 0 0 0px; -moz-border-radius:0px 0 0 0px; -webkit-border-radius:0px 0 0 0px; }
#navigation {background:transparent;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;border-left:0px solid #dbdbdb;border-right:0px solid #dbdbdb;border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;}
And, the HTML itself:
<div id="navigation" class="col-full">
<ul id="main-nav" class="nav fl"><li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="/weddings-events/">Weddings & Events</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-24 current_page_item menu-item-41"><a href="/services/">Services</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="/about/">About</a></li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="/praise/">Praise</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="/press/">Press</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="/contact/">Contact</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="/blog/">Blog</a></li>
</ul>
</div>
Ok, I think I have all the code in there.. Basically, what I want is to have a top and bottom border on #navigation, then have the nav items themselves centered automatically, and finally allow the active-item (which since it’s a different font, needs a small margin adjustment so that it’s in “line” with the other nav items), when :hovered, to not overwrite the top/bottom border.
No hover effect, looks “fine” – http://content.screencast.com/users/WolfSnap/folders/Snagit/media/051b5d52-a234-4714-90e9-cd772db5b6dc/2012-07-07_15-09-37.png
With hover effect, border goes away! – http://content.screencast.com/users/WolfSnap/folders/Snagit/media/7b921116-f7fa-4e4f-b5c1-10fe865c409b/2012-07-07_15-10-57.png
