Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 17, 2016 at 10:31 am #633602
    MadRhino

    I am using #C3C3C3 as a standard font color for the menu and #22b3ed as the color for hovers and active links. How can I match that on pages where I use the transparent header option?

    The issue has been resolved previously by adding the following code to the Quick CSS section; however, this doesn’t seem to work anymore.

    .av_header_transparency .av-main-nav > li.current-menu-item > a > .avia-menu-text, #top #wrap_all .av_header_transparency .main_menu ul:first-child > li:hover > a { color: #22b3ed; }
    .logo {
    top: 10px;
    }

    You can see the original thread here https://kriesi.at/support/topic/align-menu-in-custom-header/
    Many thanks for any pointers.

    May 17, 2016 at 6:41 pm #633906
    Jordan

    Hey MadRhino,

    Thanks for getting in touch with us!

    Try this CSS instead:

    #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text:hover {
    color: #22b3ed !important;
}

    Best regards,
    Jordan

    May 18, 2016 at 12:34 am #634093
    MadRhino

    Many thanks Jordan, but your code snippet doesn’t make a difference. It’s the same.

    Any other ideas? I would appreciate them.

    Many thanks again.

    May 19, 2016 at 5:38 am #634908
    Ismael

    Hi,

    Please try the the following css code:

    #top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
    color: #c3c3c3;
}

#top #header.header_color.av_header_transparency .av-main-nav > li:hover > a .avia-menu-text {
    color: #22b3ed;
}

    Please copy the code directly from this forum, not from your email.

    Best regards,
    Ismael

    May 19, 2016 at 10:01 am #635085
    MadRhino

    Thank you Ismael. This works now, however, the menu item for the active page is not highlighted anymore.

    For instance, when I’m on the contact page, I’d like the corresponding menu item to be highlighted, even if this page uses the transparent header option. I remember that this worked before. Would you mind looking into that? I would really appreciate it.

    Many thanks.

    May 19, 2016 at 7:11 pm #635427
    Yigit

    Hi,

    Can you please post the link to your website?
    According to this website – http://www.downforeveryoneorjustme.com/, website you posted in other thread is currently down.

    Best regards,
    Yigit

    May 20, 2016 at 8:20 am #635767
    MadRhino

    Thanks for your response Yigit.

    Unfortunately I’m not sure what you are trying to imply by including the link to this website above.

    Either way, please feel free to check out my site.

    Many thanks for your help

    May 23, 2016 at 4:38 am #636518
    Ismael

    Hi,

    Add this below the other codes:

    #top #header.header_color.av_header_transparency .av-main-nav > .current_page_item > a .avia-menu-text {
    color: yellow;
}

    That is for the active menu state.

    Best regards,
    Ismael

    May 24, 2016 at 10:17 am #637336
    MadRhino

    Thank you Ismael, this works!

    One final question though. Would it be possible to work with entirely different CSS on a particular page?

    For instance, on my legal terms page, I’m working with a medium grey background where neither menu option (standard or transparent) looks particularly stunning. They white background of the standard menu looks a little off and the transparent menu option with the white logo and menu items just doesn’t stand out enough.

    Now my question is, would be possible to work with custom CSS for the transparent menu options just for this particular page? What I’m thinking about is using the same settings of the standard menu item just without the white background.

    I’d really appreciate your help with this.

    May 26, 2016 at 6:32 am #638497
    Ismael

    Hi,

    Use the body class attribute of the page (page-id-8243):

    .page-id-8243, .page-id-8243 .header_color .header_bg {
    background-color: #eaeaea;
}

    WordPress Developers: Your Complete Guide to Conquering CSS in 2016

    Best regards,
    Ismael

    May 26, 2016 at 9:25 am #638592
    MadRhino

    Fantastic! Thank you very much Ismael. I truly appreciate it.

    Excellent support. Very happy! :-)

    May 26, 2016 at 9:44 am #638600
    Vinay

    Hi,

    Glad we could help!

    To know more about enfold features please check – http://kriesi.at/documentation/enfold/

    Thank you for using enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Matching Transparent Header Hover and Active Link Colors’ is closed to new replies.