Close

Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings

UPDATE LAYERS View on GitHub

How to Customize WordPress Menu Links Color or Style

How To  Last Updated: Time to Read: 2 minutes

If you want to add unique styles to individual menu links such as colors or icons, this tip is for you. If you just want to change the overall color or style of the nav menu, refer to How to Customize the Header Menu Style

It is often helpful to style the link in your main menu differently when the page is being viewed. WordPress automatically adds the current-menu-item  class to the link in this state, which you can use in Custom CSS to apply a different color etc. To view this class, right-click the link while viewing its page, and choose Inspect Element to open the browser inspector. A common trick is to set this link to use the hover color, so there is no change on hover when on this page, and the link looks “pressed.”

This example shows how we combine the current-menu-item  class with the original CSS selector for the menu link, .nav-horizontal li a

The current-menu-item class is applied to the li , so we replace the li  (which selects just any li under the nav-horizontal element) with the more specific class.

current-menu-item

If you want this page link to

You can add custom classes to your menus or individual links in the menu through the WordPress Menus screen. These classes can be used to apply special styles to any link with that class applied. Custom classes can also be used as a workaround for instances where a page link does not get the current-menu-item  class due to being a Custom Post Type archive or template.

  1. Go to  Appearance → Menus,
  2. Click on Screen Options in the top-right
  3. Check CSS Classes under “Show advanced menu properties”. This will allow you to expand each menu item and add a custom class name that can be used to write Custom CSS for applying unique styles to each menu link.menu-classes
  4. You may now expand the menu items and add a unique CSS class for use in building your Custom CSS. In the below example, the unique class for the Design link is simply design-link . It is important not to use generic terms for your class names, ie do not use “home” “blog” etc as these are reserved classes for the page itself. To make your class unique, you can just add -link  on the end.
    • menu-classes2
  5. Click Save Menu when finished.

Building the CSS

We won’t get into the detail of styling menu items here, as that is up to you, but following is an example of how to implement your custom menu styles.

  1. Go to Appearance  Customize
  2. Expand the CSS (or DevKit) panel
  3. Format the style like below:

For more help on customizing menus, see the WordPress Codex

Did you know?

Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.

Jetpack