Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 5, 2018 at 9:40 pm #952170
    intimadecom

    Hello!
    When i set certain pages to start with a transparent header before scrolling: is there a way to get the drop down menus transparent too?
    Thank you so much!

    May 6, 2018 at 4:39 am #952206
    Mike

    Hey intimadecom,
    Try this code in the General Styling > Quick CSS field:

    
.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
background-color:rgba(255, 255, 255, 0.5) !important;
}
.header_color.av_header_transparency .header_bg, .header_color.av_header_transparency .main_menu ul ul, .header_color.av_header_transparency .main_menu .menu ul li a, .header_color.av_header_transparency .pointer_arrow_wrap .pointer_arrow, .header_color.av_header_transparency .avia_mega_div, .header_color.av_header_transparency .av-subnav-menu > li ul, .header_color.av_header_transparency .av-subnav-menu a {
background-color:transparent !important;
    border-color: transparent !important; 
}
.header_color .main_menu .menu ul li a {color: #fff !important;}

    Best regards,
    Mike

    May 6, 2018 at 12:21 pm #952309
    intimadecom

    Thank you for the fast response, it almost worked out!

    I just changed the opacity to 1., that the header after scrolling will be white and the last color in your code to black, that sub menu links are black again.

    .header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
background-color:rgba(255, 255, 255, 1 !important;
}
.header_color.av_header_transparency .header_bg, .header_color.av_header_transparency .main_menu ul ul, .header_color.av_header_transparency .main_menu .menu ul li a, .header_color.av_header_transparency .pointer_arrow_wrap .pointer_arrow, .header_color.av_header_transparency .avia_mega_div, .header_color.av_header_transparency .av-subnav-menu > li ul, .header_color.av_header_transparency .av-subnav-menu a {
background-color:transparent !important;
    border-color: transparent !important; 
}
.header_color .main_menu .menu ul li a {color: #000 !important;}

    Now, at a window width size of about 989px, the logo & burger menu is not shown anymore but appears again at 767px, because the header is white there, but the “transparent” logo is still used, so i only can see a white header without a menu.

    Can we fix this, either bringing back the black logo & burger menu for this mobile/tablet width size or have the header transparent on that certain pages too for that size? Thank you so much!

    Lookin forward to hear from you.

    • This reply was modified 6 years, 6 months ago by intimadecom.
    May 7, 2018 at 2:31 am #952430
    Mike

    Hi,
    To have your logo and burger menu show between 767px & 988px, which is where it is now showing as white on white, Try this code in the General Styling > Quick CSS field:

    @media only screen and (min-width: 768px) and (max-width: 988px) { 
.av_header_transparency div .av-hamburger-inner,.av_header_transparency div .av-hamburger-inner::before,.av_header_transparency div .av-hamburger-inner::after {
    background-color:#000 !important; 
}
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    opacity: 1 !important; 
}
}

    Please put at the end of all of your css code. If this doesn’t help, please try placing the code in: WordPress > Customize > Additional CSS

    Best regards,
    Mike

    May 7, 2018 at 10:15 am #952563
    intimadecom

    It worked out – thank you so much, have a good day :-)

    May 7, 2018 at 4:23 pm #952734
    intimadecom

    Mike, so i thought it would work now, but now when i scroll the header is not sticky anymore at that size :-( Its stuck to the head.
    Do you have another idea?
    Thank you.

    May 8, 2018 at 6:12 am #953112
    Victoria

    Hi intimadecom,

    None of the code above affects the header position and the header seems to be still fixed on top, can you please point us to the page where it does not seem to work?

    Best regards,
    Victoria

    May 9, 2018 at 9:10 am #953762
    intimadecom

    ok, i just saw, that it is normal, that the header is not sticky at tablet/mobile sizes. i’m fine with that, thank you!

    May 9, 2018 at 11:57 am #953844
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    and the video tutorials here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Sub Menu Style while Top Transparency Header’ is closed to new replies.