Yeah, the title about sums it up. I am trying to utilize:
.header-scrolled #header_main .av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
border-color: #ffffff !important;
}
Obviously, it’s not working, either that or I am simply too tired and that could certainly be the case. I have been hunting for some time now for a solution.
When the browser window is scrolled I have the logo changing, the header background color changing, and the menu font changing… the separator simply won’t change.
Any insight you can provide is greatly appreciated.
I can’t really share the URL as this site is just in development and I am working on via the hosts file. I mean I could share the IP, but let’s see if it gets there.
Thanks,
J
i really don’t know why your code is not working.
the rule which sets the border-color is:
.header_color span {
border-color: #fff
}
aha : now i see our fault: the “av_seperator_small_border” is also a class on header and it is between header_color and header-scrolled
.header_color.av_seperator_small_border.header-scrolled .av-main-nav > li > a > span {
border-color: #fff !important;
}
will do it –
be carefull – just copy paste it all classes are on #header so there is no space inbetween:
.header_color.av_seperator_small_border.header-scrolled
Perfect, thank you Guenni007, outstanding work!
Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon