Archived topic

Change color nav button

5 replies · Started by Renske on February 17, 2022

Viewing posts 1–6 of 6

February 17, 2022 at 8:36 am #2122914

Hi there,

Most of my pages have a dark background behind the navigation, except for my blog posts. Since the nav button is white, it isn't visible on my blog posts. How do I change this only for blog posts? See link in private info for example.

February 17, 2022 at 8:51 am #2122947

Hi there,

you can add additional CSS rules and target the single body class like so:

.single .main-navigation .main-nav ul li.nav-button a {
    border: 2px solid #fff;
    color: #fff !important;
    line-height: 35px;
}

.single .main-navigation .main-nav ul li.nav-button:hover a {
    border: 2px solid #78c16c;
    background-color: #78c16c !important;
    color: #f00;
    line-height: 35px;
}

Just update the colors :)

February 21, 2022 at 5:52 am #2127407

Hi David,

Thanks!

And how do I change the color of the text in hover mode? :) It's green now and I want it to be white.

February 21, 2022 at 6:20 am #2127440

You can add the color value to this CSS rule:

.single .main-navigation .main-nav ul li.nav-button:hover a {
    border: 2px solid #78c16c;
    background-color: #78c16c !important;
    line-height: 35px;
}

so it becomes:

.single .main-navigation .main-nav ul li.nav-button:hover a {
    border: 2px solid #78c16c;
    background-color: #78c16c !important;
    color: #f00;
    line-height: 35px;
}

February 21, 2022 at 6:44 am #2127482

This was way too easy ;) Thanks David! :D

February 21, 2022 at 7:48 am #2127551

Glad to hear that!

This archived topic is closed to new replies.

Start building better websites today.