Archived topic

Header Button Solid Colour

1 reply · Started by Gareth on January 18, 2022

Viewing posts 1–2 of 2

January 18, 2022 at 3:43 pm #2085244

Hello,

How can I make the button colour on my navigation solid?

Currently, when you hover over it, it turns black.

Below is the CSS that I'm using.

/* GeneratePress Site CSS */
.sidebar a.button.light {
color: #ffffff;
}
@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #d61f2c;
border: 3px solid #d61f2c;
color: #ffffff;
line-height: 35px;
}.inside-article,
.sidebar .widget,
.comments-area {
border-right: 2px solid rgba(0, 0, 0, 0.07);
border-bottom: 2px solid rgba(0, 0, 0, 0.07);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

.button, .wp-block-button .wp-block-button__link {
padding: 15px 25px;
}

@media (max-width: 768px) {
.post-image img {
max-width: 100%;
}
} /* End GeneratePress Site CSS */

Thanks,
Gareth

January 18, 2022 at 4:01 pm #2085264

Hi there,

Edit this existing CSS:

.main-navigation .main-nav ul li.nav-button a {
background-color: #d61f2c;
border: 3px solid #d61f2c;
color: #ffffff;
line-height: 35px;
}

to this:

.main-navigation .main-nav ul li.nav-button a,
.main-navigation .main-nav ul li.nav-button a:hover {
background-color: #d61f2c;
border: 3px solid #d61f2c;
color: #ffffff;
line-height: 35px;
}

This archived topic is closed to new replies.

Start building better websites today.