Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1259600

    Hey,

    I am wondering if it is possible to fix the burger menu in the header transparently to the top of the page while scrolling on a smartphone.

    Thank you for your help.

    Kind regards
    Justus

    • This topic was modified 3 years, 3 months ago by jvsamson.
    #1259720

    Hey jvsamson,

    You can have a sticky header on mobile too, but not only the burger.

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1259730

    Hey Victoria,
    That would be great.

    I Have attached some login-credentials

    #1259967

    Hi jvsamson,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
        .responsive #top #wrap_all #header {
            position: fixed;
        }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1259986

    Hey Victoria,

    Thank you so much.
    That worked!
    Your customer service really is amazing!

    Best regards,
    Justus

    #1259997

    Hi Justus,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1260184

    Hey, Victoria,
    i am very happy that the burger menu is now fixed on mobile devices. However, I now have a new question. Would it be possible that the header is transparent at the top of the page so that the picture show remains fully visible?

    With kind regards,
    Justus

    #1260251

    Hi,

    You don’t need to add any css modification to make a transparent header. Edit the page then set the Layout > Header visibility and transparency to “Transparent Header”.

    Best regards,
    Jordan Shannon

    #1260335

    Hi Jordan,

    Sorry for being so complicated.
    There is probably a super essay solution wich I simply can’t grasp in the moment.

    I beliefe that I have set my settings to show a “Transparent Header” in exactly the way you are explaining. Nevertheless this does not seem to work on smaller devices such as smartphones.

    Best regards,
    Justus

    #1260458

    Hi Justus,

    Please refer to this: https://kriesi.at/documentation/enfold/header/#transparent-header-on-mobile

    Best regards,
    Rikard

    #1260472

    or try this in your quick css:

    /****** sticky header with transparent bg at beginning *************/
    /****** adjust the 989px to when responsive case burger is visible ***** my setting is 990px ********/
    @media only screen and (max-width: 989px) {
      .responsive #top #wrap_all #header .container {
        width: 90%;
        max-width: 90%;
      }
       
      #header {
        position: fixed !important;
        height: 115px !important;   /*** 80px if you got no top header ****/
        max-height: 115px !important;   /*** 80px if you got no top header ****/
      }
      
      .responsive #top #wrap_all .av_header_transparency {
        background-color: transparent;
      }
    
    /****** if you like to have on mobile white bg first then this and remove transparency option 
      .responsive #top .header_bg {
        opacity: 1;
        filter: alpha(opacity=100);
        background-color: #fff !important;
      }
    *************/
       
      .responsive #top .av-logo-container ,
      .responsive #top .logo a,
      .responsive #top .logo img {
        height: 80px !important;
        max-height: 80px !important;
      }
      
      .responsive #top .av-main-nav .menu-item-avia-special a {
        height: 80px !important;
        line-height: 80px !important;
      }
    }
    /****** End *************/

    you can see it here in action: https://webers-testseite.de/pureinstall/

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