CSS to Change Color of secondary menu

Posted on May 14, 2021 by

Tagged: Page Headers

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
May 12, 2021 at 10:43 am #37685

Andy Andersson
Guest

See the comments here about how I can’t change the color of the secondary menu font even with !Important. The secondary menu is on the About Us page.

Thanks,

Andy

May 12, 2021 at 11:35 am #37713
Jesse Owens
Keymaster
Hi Andy-

Thanks for reaching out, and thanks for choosing the Crio WordPress Theme for your new website.

Here’s the code from your comments that’s not working right now:
```
#horizontal-menu li {
    color: #ff4f66 !important;
    font-family: 'Roboto condensed';
    font-size: 18px;
}
```
It turns out that it’s the link color that’s overriding the !important rule. Use this one instead:
```
#horizontal-menu li a {
    color: #ff4f66;
    font-family: 'Roboto condensed';
    font-size: 18px;
}
```
Since this is a more specific rule, the !important is no longer necessary.
May 13, 2021 at 2:06 pm #37758

Andy Andersson
Guest

Jesse,

Fantastic – thank you.

FYI, I found that this new code also overwrites the active/current coloring until I added the ‘!important’, i.e.,

.boldgrid-shortcode.horizontal-menu .widget li.current-menu-item a {
color: #f48600 !important;
}

Thanks for all the help.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘CSS to Change Color of secondary menu’ is closed to new replies.