Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #963866

    Hi Yigit,
    you were able to help a guy with this

    I have the same problem, but integrating the CSS code didn’t work.
    Also if i change the background color, it will stay white on mobile devices.
    Do you have an Idea how to solve the problem?

    Kind regards.

    Sorry for opening a second Thread. But the other one was already closed.


    Hey Filipp,

    Please provide us with a link to your site. Also, no problem opening a second thread, that last one was kind of old and things might have changed.

    Best regards,
    Jordan Shannon


    Thanks for getting back at me Jordan.
    Here is the Link.

    Thanks for the help
    Kind regards.



    That is the default header layout on mobile view. If you’re looking for a way to change the logo, you can set a default logo for non-transparent header and another logo for the transparent headers. You’ll find that option in the Enfold > Header > Transparency Logo. We don’t recommend fixed headers on mobile view because it creates more issues.

    Best regards,


    Hi Ismael,

    thank you for your reply.
    I understand. But i dont want to have a fixed header, only a transparent one also on mobile devices.
    Possible? Or not recommended because of more troubles?
    The other option would be to taint the header on mobile devices into another color, so the logo becomes visible.
    Would be grateful for a hint how to proceed.

    Thank you. and kind regards.


    If you have the menu changing at 990 w/ a transparent menu you can keep it fixed using this until it hits the mobile break point. — This will also work if you have a transparent sticky menu.

    This is a bug Enfold must fix if using a transparent menu with the mobile menu set to become active at 990px instead of 767px

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive.html_header_top.html_header_transparency #top #wrap_all #header, .responsive.html_header_top.html_header_sticky #top #wrap_all #header {
    position: fixed;



    Thank you very much for sharing that info, we much appreciate it! :)

    Best regards,


    I think her question was more that she has a Transparent header on a desktop before you scroll and wanted to have the same effect on Mobile right?
    By Default the header is a solid color above the content on mobile.
    I would like like to be able to do this but haven’t been able to figure it out, the solution linked to only applies to after you scroll and not before.



    Hey Jon,

    So you want the transparent header on mobile, that goes solid on scroll?

    Best regards,
    Jordan Shannon


    nope, am already using this extra code to make the header transparent after the scroll on mobile

    @media only screen and (max-width: 990px) { 
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
      background: transparent!important;
      position: absolute!important;

    What I want to do is the make the header transparent on mobile before you scroll just like it is on desktop
    private info has a link to the site on another platform where it is transparent and over the content before scroll on both Desktop and Mobile



    I envision that if we use JS to inject the transparent class on the header on mobile then it may work. Are you familiar with JS?

    Best regards,
    Jordan Shannon


    was a solution ever provided for this? i would also like a transparent menu for mobile devices, same as it looks on desktop… thanks!


    Hi Green Beans Creative,

    The transparent menu on mobile was never requested, header transparency on the other hand is. Here are our docs

    Best regards,

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