Use CSS to highlight a menu option

Let’s use CSS to highlight a specific option in your menu bar.

1. On your admin dashboard, hover over Appearance and select Menus.

2. Find the menu option you want to edit and wrap the text in <span> tags, like so:

<span class="highlight">Your Menu Item</span>

spanmenu

3. Great! Now you just have to add that class in your CSS:

/* Highlight Menu Link */
  .highlight {
    color: #cc0000;
  }

Note: You may have to add !important to override other CSS on your website, like so:

/* Highlight Menu Link */
  .highlight {
    color: #cc0000 !important;
  }

Optional: You can change different properties, such as font weights, background colors, and borders to create unique highlighted links, such as a blue button like this:

highlight

To do this, you can add more properties to the CSS:

/* Highlight Menu Link as a Button */
  .highlight {
    color: #fff;
    font-weight: 600;
    padding: 7px 20px 5px 20px;
    background: #21cbed;
    border-radius: 25px;
  }

Quick, simple, and easy! You’re all done.

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Sign Up