I have a Wordpress menu on my site generated by code:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-primary' ) ); ?>
When I assign the menu called "Categories" to the "Primary Menu" location, this generates front end code of:
<ul id="menu-categories" class="nav-primary">
<li id="menu-item-910" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-910">
<a href="http://steven.doig.com.au/category/environmental/">Environmental</a></li>
</ul>
The following CSS is not being applied:
.nav-primary {
display: block;
}
.nav-primary ul {
list-style-type: none !important;
background-color: rgba(0,0,0,0.25) !important;
padding: 5px !important;
border-radius: 8px !important;
-moz-border-radius: 8px !important;
-webkit-border-radius: 8px !important;
}
.nav-primary ul li {
display: inline-block !important;
background-color: rgba(0,0,0,0.25) !important;
margin-right: 5px !important;
height: 32px !important;
padding-top: 8px !important;
border-radius: 8px !important;
-moz-border-radius: 8px !important;
-webkit-border-radius: 8px !important;
}
.nav-primary ul li a {
text-decoration: none !important;
color: #fff !important;
margin: 8px 14px 0 14px !important;
}
How do I style this menu when the ID being output on the front end is generated from the name of the menu in Appearance > Menus ?
If I deploy this theme to the public, I will never be able to anticipate what the name of the menu will be, and the generated ID will always take precedence over the class.