Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 3, 2022 at 10:54 am #1374880
    BenjaminSpeedtsberg

    How can I set the Mobile menu to be transparent like the function for the desktop version?

    December 3, 2022 at 11:27 am #1374890
    Nikko

    Hi BenjaminSpeedtsberg,

    Can you try Yigit’s solution on this thread?
    Hope it helps.

    Best regards,
    Nikko

    December 3, 2022 at 11:49 am #1374893
    BenjaminSpeedtsberg

    Hi,

    Thanks, that works for the Transparent header. But the logo is till not from the Transparent header settings.

    If I could get the exact same function like Transparent settings and sticky settings for the mobile version(max 990px) as it is for the Desktop version. Just like Yigit’s thread describes.

    December 5, 2022 at 2:53 am #1375069
    Nikko

    Hi BenjaminSpeedtsberg,

    Please try to add this CSS code as well:

    @media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header.av_header_transparency {
    position: absolute;
    background-color: transparent;
  }

  .responsive #top #wrap_all #header.av_header_transparency .logo img {
    display: none;
  }

  .responsive #top #wrap_all #header.av_header_transparency .logo img.alternate {
    display: block;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    December 5, 2022 at 9:19 am #1375084
    BenjaminSpeedtsberg

    It’s still the same non transparent logo.

    December 7, 2022 at 7:03 pm #1375413
    Nikko

    Hi BenjaminSpeedtsberg,

    The code I gave does not seem to show or get fetched.
    Can you try to disable CSS File Merging And Compression in Enfold > Performance? and also try to flush and temporarily disable any caching plugin.
    If that still does not work, please give us temporary admin access, so we can check further.

    Best regards,
    Nikko

    December 8, 2022 at 2:17 pm #1375530
    BenjaminSpeedtsberg

    Still not working as expected i think.

    December 8, 2022 at 4:14 pm #1375546
    Yigit

    Hi,

    Thanks for contacting us!

    Please post temporary admin logins privately so we can look into it :)

    Regards,
    Yigit

    December 8, 2022 at 7:28 pm #1375583
    BenjaminSpeedtsberg

    Sure!

    December 9, 2022 at 11:42 am #1375649
    Nikko

    Hi BenjaminSpeedtsberg,

    Thanks for giving us admin access.
    I have added this CSS code in Quick CSS:

    @media only screen and (max-width:980px) {
  .responsive #top #wrap_all #header.av_header_transparency {
    position: absolute;
    background-color: transparent;
  }

  .responsive #top #wrap_all #header.av_header_transparency .logo img,
  .responsive #top #wrap_all #header.av_header_transparency .logo > a > svg {
    display: none;
  }

  .responsive #top #wrap_all #header.av_header_transparency .logo img.alternate,
  .responsive #top #wrap_all #header.av_header_transparency .logo .subtext {
    display: block;
  }
}

    Please review your site.

    Best regards,
    Nikko

    December 9, 2022 at 12:06 pm #1375665
    BenjaminSpeedtsberg

    Thanks for that. But the Burger menu is still black. And if i style it white, it’s also whit on fly out and therefor invisible. Any solutions or is it too much?

    December 11, 2022 at 2:40 am #1375816
    Mike

    Hi,
    To have the burger menu icon white with the header is transparent and have it change to dark gray when the burger menu is opened please try this css:

    @media only screen and (max-width: 989px) { 
  .html_mobile_menu_tablet .header_color.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color.av_header_transparency div .av-hamburger-inner::after {
  	background-color: #fff !important;
  }
  .html_av-overlay-side.av-burger-overlay-active #top .header_color.av_header_transparency div .av-hamburger-inner, 
  .html_av-overlay-side.av-burger-overlay-active #top .header_color.av_header_transparency div .av-hamburger-inner::before, 
  .html_av-overlay-side.av-burger-overlay-active #top .header_color.av_header_transparency div .av-hamburger-inner::after {
  	background-color: #404040 !important;
  }
}

    After applying the css, please clear your browser cache and check.
    If you have trouble try clearing your server cache or add the css to the WordPress ▸ Customize ▸ Additional CSS field

    Best regards,
    Mike

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