Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 22, 2018 at 1:15 am #1000093
    mattb1169

    Hello,
    I’ve created a site with a transparent header, I want to use the burger menu over the image but when i do this and scroll the white header appears. Is there a setting or CSS code I can use to keep the header transparent and responsive (so stays hidden on mobile, tablet and desktop)?

    August 22, 2018 at 2:36 am #1000104
    Mike

    Hey mattb1169,
    Please 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:transparent !important;
}

    Best regards,
    Mike

    August 22, 2018 at 3:05 am #1000108
    mattb1169

    Thank you Mike. Please see the attached screenshot, the white header appears when testing on mobile. Would like that to be hidden/transparent while burger menu shows.

    August 22, 2018 at 3:44 am #1000124
    Mike

    Hi,
    Please add this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 989px) { 
  .responsive #top #main {margin-top: -80px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  }

    Best regards,
    Mike

    August 22, 2018 at 4:33 am #1000130
    mattb1169

    Thanks again Mike,
    I’m still seeing a header on the iPhone screen and iPad screen. New screen shots attached after adding the latest CSS. Any other thoughts? Do I need to remove the previous script you provided?

    August 22, 2018 at 1:01 pm #1000286
    Mike

    Hi,
    Please create a test page with the header active, It’s a little hard to guess at images and get the code right.
    If you also include a admin login I can adjust the current codes, it might be easier :)

    Best regards,
    Mike

    August 22, 2018 at 3:38 pm #1000404
    mattb1169

    Mike,
    The login is below. Thanks for looking into this.

    August 22, 2018 at 5:00 pm #1000430
    mattb1169

    Hi Mike,
    It is looking good now on mobile, thank you. The only other issue is that the burger menu on an iPhone is cut off. Please see screenshot. Is this related to the script added to CSS or is there a setting I’m missing?

    Thank you!

    August 23, 2018 at 2:28 am #1000560
    Mike

    Hi,
    I took a look at your css and settings, but didn’t see a cause for your mobile menu not opening fully.
    I added this css to your Quick CSS to correct, Please clear any cache plugin and your browser cache and check.

    .av-burger-overlay-scroll, ul#av-burger-menu-ul {
width: 300px !important; 
}

    Please feel free to adjust the width to suit.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.