Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer 1

up vote 0 down vote accepted

I think you are not targeting the element correctly. Try this:

    #mainmenu {
        display: block;
    }
    #mainmenu ul.nav-primary {
        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;
    }
    #mainmenu ul.nav-primary 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;
    }
    #mainmenu ul.nav-primary li a {
        text-decoration: none !important;
        color: #fff !important;
        margin: 8px 14px 0 14px !important;
    }

Try replacing the code you've mentioned above or adding it at the bottom of file ↓

http://steven.doig.com.au/wp-content/themes/transparent/style.css
share|improve this answer
    
Getting closer, I think, but still no change. –  Steve Jul 23 '13 at 4:31
    
That should have fixed it. I tried in firebug and styling of your navigation doesn't look broken anymore. Check it out → tinypic.com/view.php?pic=vgpu03&s=5 –  vDog Jul 23 '13 at 4:41
    
I've cleared my cache and it remains the same. Can you try loading the page without custom code in firebug? I guess you could then determine what CSS code is missing, by building back up to the solution. (I can't see what is missing from the CSS code I added from your solution.) –  Steve Jul 23 '13 at 5:48
1  
I see. Had a look at the code you've added again and there are some mistakes. For example: #mainmenu ul.nav-primary ul { } needs to be: #mainmenu ul.nav-primary { } If you just copy and use the code I've given above, it'll work. Doesn't need any editing or adjustments. –  vDog Jul 23 '13 at 6:01
    
Beautiful. Thank you vDog! –  Steve Jul 23 '13 at 12:53
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.