Navigation color changes on scroll - sub indicator

Support
#1

Hi there -

I’m using the following code to change my navigation background and navigation text on scroll. It’s all working except for the sub indicator color. How can I add that to the code? My initial tries have been unsuccessful.

/Sticky Bar Color/
.x-bar.x-bar-top.x-bar-fixed {
background-color: #fff !important;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

/Sticky Menu Color/
.x-bar-fixed .x-menu > li > .x-anchor .x-anchor-text-primary {
color: rgb(33, 33, 33);
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

/Sticky Sign In Button Color/
.x-bar-fixed .e1173-8.x-anchor .x-anchor-text-primary {
color: rgb(99, 102, 105) ;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

/Sticky Sign In Hover Color/
.x-bar-fixed a.e1173-8.x-anchor.x-interactive {
border-color: rgb(99, 102, 105) ;
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

/Sticky Logo Color/
.x-bar-fixed a.e1173-3.x-image{
filter: invert(65%);
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

#2

Hi @warwebdesigns,

Thanks for reaching out.
Regretfully, we don’t offer any investigation on custom coding. Still, I would like to suggest you inspect the sub-indicator element through the Browser Debugger tool and check which class needs to override to change the color.
It might be something like the following one.

.x-navbar .desktop .x-nav li > a > span::after

Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

#3

For anyone who might need it, this solved my problem:

.x-bar-fixed .x-menu > li > .m19-n.x-anchor .x-anchor-sub-indicator {
color: rgb(33, 33, 33);
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;
}

#4

Hey @warwebdesigns,

It is good to know that you have resolved your issue already.

By the way, this one is NOT the correct way to add comments within CSS code.

You should be commenting like this:
/* My Comments */

Reference: https://www.w3schools.com/css/css_comments.asp

#5

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