Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 10, 2020 at 3:52 pm #1259600
    jvsamson

    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 4 years, 1 month ago by jvsamson.
    November 11, 2020 at 12:12 am #1259720
    Victoria

    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

    November 11, 2020 at 12:35 am #1259730
    jvsamson

    Hey Victoria,
    That would be great.

    I Have attached some login-credentials

    November 11, 2020 at 9:53 pm #1259967
    Victoria

    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

    November 11, 2020 at 10:55 pm #1259986
    jvsamson

    Hey Victoria,

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

    Best regards,
    Justus

    November 11, 2020 at 11:16 pm #1259997
    Victoria

    Hi Justus,

    Glad we could help :)

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

    November 12, 2020 at 5:28 pm #1260184
    jvsamson

    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

    November 13, 2020 at 2:39 am #1260251
    Jordan Shannon

    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

    November 13, 2020 at 1:10 pm #1260335
    jvsamson

    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

    November 14, 2020 at 7:01 am #1260458
    Rikard

    Hi Justus,

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

    Best regards,
    Rikard

    November 14, 2020 at 10:09 am #1260472
    Guenni007

    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/

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