CSS styling a whole menu in one go

  • Simple question but I can’t see the tress for…

    I can see how to create a menu and register in WP. I can also see who to turn on CSS options in menu editing,

    I can even see how to add a CSS class to individual menu button/items through that.

    The thing I can’t find is how I would apply a class to a whole menu so that instead of having to add my-class to each individual button in the menu list I want to add my-class to the whole list in one go.

    What am I missing?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • https://localhost does not help ??

    The menus are unordered list and you can use the css to style them all using the syntax as under:

    menu > li{

}
    Thread Starter robmcp

    (@robmcp)

    Yes I know I can do that, but in WP site admin. Settings > Menus, expand each button with the small drop down arrow, you see various options.

    Nav label, title attribute and CSS classes (optional)

    I can see that for each button, I add into the menu list I can apply a style to each one. I want to set a global style so that if I create a new page to go into that menu list, I do not have to apply a style to each one in the list. Time consuming.

    I am sure that I am missing something fuindamental here and if I sound dim then I am sorry, but there must be a way of setting a style for the whole menu, be it the Main menu, secondary menu, footer menu or any new ones that I care to create.

    It seems odd that I can pick an individual button, and through the wp admin set a style for that button, but I can’t find a way to set a style globally through those options.

    Does that make sense?

    I’m not sure why you need to add a class to each menu button. As luckychingi stated, if you want to affect all of the buttons in the menu, just use the li element name in your CSS rule selector. If your site has different menus (primary, secondary, footer, etc), then you just use the ID that’s associated with that menu:

    
#primary-menu > li {
   font-weight: 700;
}
    Thread Starter robmcp

    (@robmcp)

    I’m not sure why you need to add a class to each menu button

    .

    I don’t, my query is that in the admin section you are able to apply CSS classes to each button individually, but not to the WHOLE menu in one go. (in the admin area)

    I assume then that I need to ‘find’ the ‘name’ of the menu so that I can apply a class globally through the CSS ?

    Thanks for taking time to reply the reply both.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS styling a whole menu in one go’ is closed to new replies.