Question

I am trying to install a custom menu in my WordPress theme. I have successfully enabled the feature and embedded the menu in my layout, the only issue is that the CSS is not working for the menu.

I had a custom CSS called NAV and I also tried just copying and pasting the CSS from the Twenty Eleven them into my CSS (which is called access). But no matter what I do, the navigation style doesn’t change. I’m starting to think it might be my embed code. Here it is:

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'access', 'menu_class' => 'access' ) ); ?>

Here is the HTML that is generated:

<div class="access">
<ul id="menu-home" class="access">
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://www.studentbridges.org/new/sample-page/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="http://www.studentbridges.org/new/sample-page/history/">History</a>      
</li>
</ul>
</li>
</ul>
</div>

And here is the relevant CSS:

#access {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a));   /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}

#img {border-bottom:2px solid #9bc5c4;margin:0;padding:0;max-height:125px;overflow:hidden;} #block-cck_blocks-field_hdr_img {height:128px;overflow:hidden;}
#nav {height:45px;background:url(img/main-nav-bkgd.jpg) repeat-x     #26243c;width:1008px;height:45px;z-index:90;position:relative;}
#nav ul.nice-menu {width:993px;margin:0 0 0 15px;padding:0;display:inline;}
#nav ul.nice-menu li {display:block;float:left;background:none;border:none;position:relative;color:#FFF;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;height:45px;font-size:13px;font-weight:bold;}
#nav ul.nice-menu li a {display:block;color:#FFF;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;padding:13px 23px 14px 23px;font-size:13px;font-weight:bold;text-decoration:none;}
#nav ul.nice-menu li a:hover, #nav ul.nice-menu-down li.menuparent:hover a, #nav ul.nice-menu-down li.over a, #nav ul li.active-trail a {background:url(img/nav-over.jpg) repeat-x;}
#nav ul.nice-menu li ul {position:absolute;top:45px;left:0;}
#nav ul.nice-menu li ul li {width:200px;margin:0;padding:0;height:auto!important;}
#nav ul.nice-menu li ul li a, #nav ul.nice-menu-down li.menuparent ul li a {font-size:11px;color:#231f20;font-family:Georgia, "Times New Roman", Times, serif;display:block;clear:both;padding:5px 20px;margin:0;width:160px;background:#dfccb0!important;border-bottom:1px solid #FFF;font-weight:normal;}
#nav ul.nice-menu li ul li a:hover, #nav ul.nice-menu-down li.menuparent ul li a:hover {background:#d0b389!important;}
#nav ul.nice-menu li ul li ul {display:none;}

Any input on what I could be doing wrong???

Answer 1

Your navigation wrapper has a class of “active” but in your css you are targeting an ID.

Option 1

Change #access to .access

Option 2 (which might be easier)

Change <div class="access"> to <div id="access">

Working example