Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 12, 2018 at 8:10 pm #996485
    keithbaddeley

    Hello!
    Hoping you can help with this one. I’d like to use the transparent and glassy header on all devices. Desktop not a problem as this is set in the page configuration, and I’ve managed to get it working for smartphones using the following Quick CSS from another thread:
    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: rgba(255,255,255,0.1); }
    .responsive #top #main { margin-top: -112px; }}

    However, for tablets (e.g. iPad), I still get the coloured header. I’m sure it’s a fairly simple change or addition to the above, but I can’t work it out. Reducing the browser window size on a desktop also has the same effect: glassy, then coloured, then glassy again as you get smaller.

    Thanks in advance for your help!

    Best,
    Keith

    August 13, 2018 at 4:46 am #996526
    Mike

    Hey Keith,
    Please try this code in the General Styling > Quick CSS field:

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

    Please clear your browser cache and check.

    Best regards,
    Mike

    August 13, 2018 at 5:07 pm #996763
    keithbaddeley

    Hi Mike,

    Thanks for the quick response. That works great.

    However, I have set the burger menu icon colour to #3399FF Child Theme Options / Main Menu / Burger/Mobile Menu styling, which works fine on a smartphone (e.g. iPhone) but is white on a tablet (e.g. iPad). How can I get the burger menu icon to be #3399FF across mobile and tablet devices?

    Thanks again in advance.

    Best regards,
    Keith

    August 14, 2018 at 5:41 am #996949
    Mike

    Hi,
    Please check your child theme stylesheet for this code:

    @media only screen and (max-width: 767px) {
#top .header_color .av-hamburger-inner, #top .header_color .av-hamburger-inner::before, #top .header_color .av-hamburger-inner::after {
    background-color: #3399ff;
}
}

    and change the “767px” to “990px”
    if you can’t find the code, you try to add this to override it:

    @media only screen and (max-width: 990px) {
#top .header_color .av-hamburger-inner, #top .header_color .av-hamburger-inner::before, #top .header_color .av-hamburger-inner::after {
    background-color: #3399ff !important; 
}
}

    or you can post a admin login in the Private Content area so we can correct the code.

    Best regards,
    Mike

    August 14, 2018 at 5:47 pm #997171
    keithbaddeley

    Great, thank you, Mike, all displaying now as I want it too! Many thanks.

    Best regards,
    Keith

    August 14, 2018 at 6:42 pm #997220
    Jordan Shannon

    Hi,

    I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Transparent and glassy header – tablets’ is closed to new replies.