0

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.

Improve this question
0

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
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 – Anon 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. – Anon Jul 23 '13 at 6:01
  • Hi vDog. This problem has arisen again. The menu UL is given and ID=menu-menuname, and this causes the CSS to drop out. How do I fix this? – Steve Jul 25 '13 at 0:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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