Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1108748

    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

    #1108761

    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

    • This reply was modified 5 years, 6 months ago by Guenni007.
    #1108850

    Perfect, thank you Guenni007, outstanding work!

    #1108934

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘trying to change the small separator color when scrolled…’ is closed to new replies.