Adding css classes to the WordPress menu 10


In WordPress, you can easily style your menuby adding css classes to each elements and make use of it.

  1. Go to admin > appearance > menu
  2. Click on Screen Options (top right of the screen)
  3. Check the CSS classes options in the “Show advanced menu properties” panel
  4. add your css classes to the element

adding-css-class-to-a-wordpress-menu-item

Then you can easily style your menu element with the custom css option or in your style.css if using a child theme.

See an example with this snippet : How to add a button in the Customizr menu?


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


10 thoughts on “Adding css classes to the WordPress menu

  • Reply
    Carlisle

    Hey Nicolas,

    I’m having trouble aligning images on my main page underneath the slider. I wanted to have my images with text underneath each image, aligned in a horizontal row. But try as I might, the image and text do not align. The images align vertically, but the text for the images default to the last paragraph of the previous image.

    Any advice?

    Thank you.
    Carlisle

  • Reply
    Stephen

    Hi

    Thanks for the snippet. It really help me enhance my menus.

    Is it possible to make the menu option fixed width as well?

    Regards

  • Reply
    Kevin

    Hello,

    I am trying to add a button to my menu and am having a problem. When I check the box for CSS classes I do not see a field open up that allows me to insert what I need.

    Thank you.

    • Reply
      Deirdre

      Go to menues
      Look in the upper right hand corner
      click on SCREEN OPTIONS
      look under “Show advanced menu properties”
      click CSS CLASSES
      The in the menu item lets say for example”Contact us”
      paste free_download btn btn-mini btn-primary i nthe css
      click save and your good

  • Reply
    Glendys Gil

    Hi Nicolas, I am pretty new using word press and themes. I was wondering how I can do a content table in every page… For some reason, when I do a list of the page and I put some exception for the other pages; it does not work and if put one page list appears in all of my pages… So it should not be like that. I want for every page a different content table, like yours, you have you drop down list in the top menu then inside your page you have a content table in the left side…

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">