Site logo

Archived topic

Can't Change The Colors On My Main Navigation Bar

5 replies · Started by Susan on May 25, 2020

Viewing posts 1–6 of 6

I'm using the pro version and have activated colors. However, when I go to Colors > Primary Navigation and change the colors on text colors under parent items, the colors are not changing in my site.

I would like to change the colors from white to #d95f16, but nothing seems to be working properly.

It really shouldn't be this hard to change the colors of the nav bar, I'm not sure if the CSS styles that were created in the additional CSS by GeneratePress are stopping me from being able to change the colors via customizer.

Here's the CSS that was created by the theme, is anything conflicting with my changes?

/* GeneratePress Site CSS */ @media (min-width: 769px) {
#site-navigation .inside-navigation {
border-bottom: 1px solid rgba(0,0,0,0.2);
}

/*.header-wrap #site-navigation .inside-navigation {
border-color: rgba(255,255,255,0.3);
*/

.main-navigation .main-nav > ul > li > a {
border-bottom: 1px solid transparent;
transition: border-color 500ms ease, color 500ms ease;
}

.main-navigation .main-nav > ul {
position: relative;
bottom: -1px;
}

.page-hero + #page {
margin-top: -100px;
}
}

.inside-article, .sidebar .widget, .comments-area {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.04);
transition: box-shadow 500ms ease;
border-radius: 3px;
}

.inside-article:hover, .sidebar .widget:hover, .comments-area:hover {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.no-sidebar:not(.generate-columns-activated) .inside-article > *, .no-sidebar #comments {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.separate-containers .paging-navigation {
padding: 0;
background: none;
}

.nav-links > * {
padding: 10px 15px;
border-radius: 3px;
}

.nav-links>a{
background:rgba(0,0,0,0,9)
color:#d95f16 !important;
font-weight:400;
}

.site-info {
border-top: 1px solid rgba(0,0,0,0.2);
}

button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, .wp-block-button__link:not(.has-background) {
border-radius: 3px;
}

.site-branding {
background: rgba(0,0,0,0.8);
display: inline-block;
padding: 10px 30px;
border-radius: 3px;
transition: background 500ms ease;
}

.site-branding:hover {
background: rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
#page {
margin: -75px 15px 0 15px;
}
} /* End GeneratePress Site CSS */

Thanks for all helping me solve this problem.

Have a great day!

Cool, I got it to work. One more question, how can I increase the font weight?

Thanks

Try Customizer > Typography > Primary Navigation.

Thanks that worked!

Have a great day :)

No problem :)

This archived topic is closed to new replies.