wp_nav_menu is not applying css

0
votes

Oh glorious Stack, riddle me this; why is my wp_nav_menu not being styled?

I have my function.php setup like so:

<?php
if (function_exists('register_nav_menus')) {
    register_nav_menus(array('primary' => 'Header Navigation'));
} 
?>

I have my wp_nav_menu set up like this:

<div id="navContainer" class="col-4-5">
    <?php wp_nav_menu(array('container' => 'nav',
                            'container_class' => 'topNav'))?>
  </div>

and finally I have my css as this:

.topNav ul, .topNav li {
    display:inline;
}
.topNav a {
    padding:14px 20px 10px 20px;
    float:left;
    display:inline-block;
    border-right: 1px solid #ddd;
    color:#999;
    text-decoration:none;
}
.topNav a:hover {
    color:#000;
}

I have also gone into wp-admin, created the menu "topNav", selected the theme location 'Header Navigation' and added some items. The items appear but with no css styling i.e text-decoration, inline etc...

What am I missing here?

also here's the html it's outputting:

<div id="navContainer" class="col-4-5">
  <nav class="topNav">
   <ul id="menu-topnav" class="menu">
    <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom    menu-item-11">
     <a href="#">Home</a></li>
     <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">Celebrity</a></li>
   </ul>
  </nav>  
</div>

Thanks A Wordpress beginner

1
phphtmlcsswordpress
are the classes actually being applied to the menu code? – cmorrissey
This is the html being output: <div id="navContainer" class="col-4-5"> <nav class="topNav"><ul id="menu-topnav" class="menu"><li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#">Home</a></li> <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">Celebrity</a></li> </ul></nav> </div> – UzumakiDev
there may be other styles which are overriding yours, use an inspector such as firebug to see what it is. – cmorrissey
I see each element is being assigned a wordpress class like "menu-item" is this overriding my css rules in "topNav"? – UzumakiDev

1 Answers

0
votes

It was a sass problem, see here for more information http://css-tricks.com/compass-compiling-and-wordpress-themes/