Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 1, 2015 at 12:56 am #373736
    entrepreneur41

    Hi,

    This may have been answered before, but I’ve looked and can’t find a solution.

    I have a transparent header and have set the logo and menu font color to white. When the user scrolls down, the header itself becomes white, but I cannot figure out how to make the font color change at that time, so that it’s not white on white.

    I found this CSS in another thread, but it didn’t do the trick:

    .header_color.header-scrolled .main_menu ul:first-child > li > a {
    color: red;
    }

    How can I make the menu font change colors when the user scrolls down?
    Great theme, many thanks

    January 1, 2015 at 5:04 am #373765
    Ismael

    Hey entrepreneur41!

    Happy new year!

    Change the menu color on Enfold > Header > Transparent Options panel > Transparency menu color.

    Best regards,
    Ismael

    January 1, 2015 at 11:54 am #373795
    entrepreneur41

    Hey Ismael,

    Happy New Year to you too!

    So I tried that and it didn’t do the trick. And now I’m a bit confused.

    The only way I could get the menu links to change to white font was to go Advanced Styling > Main Menu Links and change the color there. If I go to Transparency Options panel > Transparency menu color, and set the color there to black, it doesn’t make any difference; they stay white during scroll down, even though the header kicks over to white.

    Incidentally, in the Advance Styling > Main Menu Links panel, if I choose a different background color, then that background color does kick in when the user scrolls down, but the font doesn’t change at all. This is why I’m confused.

    Lastly, when I scroll down, the header does switch from purely transparent to white, but there’s still a hint of transparency in it. It’s not “opaque white” if that makes sense.

    So here’s what I’m trying to do:

    1. initial page: fully transparent header with white font;
    2. scroll down: fully white (non-transparent) header with black or grey font.

    Any ideas?

    Thanks!

    January 3, 2015 at 12:34 am #374337
    Andy

    Hey!

    please always post a link to your website, so we can help you better.

    Go to Enfold->Header->Header behaviour->choose “Sticky Header”
    Then go to your initial page to edit it. Scroll down and on the right side you will see “Header visibility and transparency”. Choose “Transparent Header”.

    To change color of menu use this in Quick CSS:

    #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a, #top #wrap_all .av_header_transparency .sub_menu > ul > li > a, #top .av_header_transparency #header_main_alternate, .av_header_transparency #header_main .social_bookmarks li a {
color: white;
}

    To change color of sticky menu use this:

    .header_color .sub_menu>ul>li>a, .header_color .sub_menu>div>ul>li>a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
color: grey;
}

    Cheers!
    Andy

    January 5, 2015 at 4:15 am #374925
    entrepreneur41

    Andy,

    Thanks for getting back to me. I tried everything above, but it didn’t work.

    Currently I’m on a local host using MAMP. Is there an easy way to get you access to the site? Dropbox?

    Thanks

    January 5, 2015 at 2:55 pm #375076
    Yigit

    Hi!

    Please go to Enfold theme options > Advanced Styling and edit “Main menu links”.
    You can upload your screenshots on imgur.com or Dropbox public folder and post the links.

    Cheers!
    Yigit

    January 27, 2015 at 8:11 pm #386547
    Leodocard

    +1 i did everything you said, but it doesn’t change the font.
    I just want to change the font color of the menu when i scroll it down.
    I have put the font in white with a transparent menu, when i scroll down i want the font change in black.
    How can i do that ?
    Thanks !!

    January 28, 2015 at 4:10 pm #387058
    Yigit

    Hi!

    Please go to Enfold theme options > Advanced Styling and edit “Main menu links”. If that does not work, please post the link to your website.

    Cheers!
    Yigit

    January 29, 2015 at 1:57 pm #387676
    Leodocard

    thanks ! for some reason (certainly my host) the font has changed few minutes after the edit !

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Change menu font color when transparent header scrolls down’ is closed to new replies.