Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 19, 2018 at 8:54 pm #987626
    asapevictions

    Hello.

    I’m looking to change some of the elements in the transparent menu. I seared the documentation but couldn’t find a solution can you help?

    Here is what I’m trying to do. The menu text isn’t style how I would like it to be when the header is at the top of my website. How do change the following elements just when the header is transparent at the top – not when scrolled.

    • The page links seems semi transparent in the menu. How do i make this text non semi transparent?
    • I need The button white with blue text only when at the top. Scrolling these the default colors are fine.
    • I need The social icons to be white. Scrolling these the default colors are fine.

    July 20, 2018 at 5:42 pm #987932
    Victoria

    Hey asapevictions,

    You need to set a different color for the menu links for the header transparency here in Theme options > Header
    Image 2018-07-20 at 18.39.09.png

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    background-color: #344559;
    color: #ffffff;
    border-color: #344559;
}

#top #wrap_all .header_color.av_header_transparency .av-menu-button-colored > a .avia-menu-text {
    background-color: #e3e5e6;
    color: #332c2c;
    border-color: #e5e6ea;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 23, 2018 at 8:25 pm #988876
    asapevictions

    Wow, what great support! Thanks. One thing though – How do I change the text color of the button when transparent? Right now it is white and I need it blue both on hover and static.

    July 24, 2018 at 6:15 am #989038
    Rikard

    Hi,

    Please try this CSS instead:

    #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    background-color: #344559;
    color: blue;
    border-color: #344559;
}

#top #wrap_all .header_color.av_header_transparency .av-menu-button-colored > a .avia-menu-text {
    background-color: #e3e5e6;
    color: blue;
    border-color: #e5e6ea;
}

    Best regards,
    Rikard

    July 24, 2018 at 8:37 pm #989353
    asapevictions

    Thanks for that new code. I had to add an import tag to the text color to stick. 

    #top #wrap_all .header_color.av_header_transparency .av-menu-button-colored > a .avia-menu-text {
    background-color: #ffffff;
    color: #35455A!important;
    border-color: #ffffff;
}
    July 25, 2018 at 7:10 am #989509
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing your code. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    July 25, 2018 at 7:08 pm #989886
    asapevictions

    close

    July 26, 2018 at 12:11 am #989992
    Vinay

    Hi,

    Glad this is sorted!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Styling for transparent menu (at top)’ is closed to new replies.