Burger Menu - fixed header - smartphone - Support | Kriesi.at

Tagged: Burger Menu, fixed, header, smartphone

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
November 10, 2020 at 3:52 pm #1259600
jvsamson
Participant
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 ago by jvsamson.
November 11, 2020 at 12:12 am #1259720

Victoria
Inactive Moderator

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
Participant

Hey Victoria,
That would be great.

I Have attached some login-credentials

November 11, 2020 at 9:53 pm #1259967
Victoria
Inactive Moderator
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
Participant

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
Inactive Moderator

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
Participant

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
Inactive Moderator

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
Participant

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
Keymaster

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
Participant
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