Archived topic
Can't Change The Colors On My Main Navigation Bar
5 replies · Started by Susan on May 25, 2020
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!
Hi there,
Check the navigation colors under the header element:
https://docs.generatepress.com/article/header-element-overview/#navigation-colors
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 :)