Changing Text Color When Navbar goes transparent

Support
#1

So I added the following code to make my fixed nav bar do a cool color change and transparency thing when I scroll. The problem is I need to know how to add the code to change the text color upon scroll for the links in the nav bar that are inactive and active as well because I am going from white where the text needs to be dark to a dark background where the text needs to be lighter. If you can show me how to add that to the following code with #ffffff (white text in both categories, I can make proper color adjustments later. I just need the basic code for CSS. Thanks!

.x-navbar.x-navbar-fixed-top {
background-color: #38393f !important;
}

.x-navbar.x-navbar-fixed-top { opacity: 0.8 !important;
}

One Page Navbar background color + changing the height of a row
#2

HI there,

You have several licenses on so I am not sure which site is in question. Would you mind providing the URL of the site that you are working on so that we could check and provide you with the code suggestion?

Thank you.

#3

http://cs12.temp.domains/~highpoo7/ which is a temporary domain. It is for the Highpoint CCOP site.

#4

Hi @crbasford,

You can do that by adding this CSS too

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
color: #fff;
} 
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a:hover, .x-navbar.x-navbar-fixed-top .desktop .x-nav > .x-active > a, .x-navbar.x-navbar-fixed-top .desktop .x-nav > .current-menu-item > a, .x-navbar.x-navbar-fixed-top .desktop .sub-menu a:hover, .x-navbar.x-navbar-fixed-top .desktop .sub-menu .x-active > a, .x-navbar.x-navbar-fixed-top .desktop .sub-menu .current-menu-item > a, .x-navbar.x-navbar-fixed-top .desktop .x-nav .x-megamenu > .sub-menu > li > a {
    color: #fff000;
}

With your preferred colors.

Cheers!

1 Like
#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.