![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: Burger Menu, fixed, header, smartphone
-
AuthorPosts
-
November 10, 2020 at 3:52 pm #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, 10 months ago by
jvsamson.
November 11, 2020 at 12:12 am #1259720Hey 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,
VictoriaNovember 11, 2020 at 12:35 am #1259730Hey Victoria,
That would be great.I Have attached some login-credentials
November 11, 2020 at 9:53 pm #1259967Hi 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,
VictoriaNovember 11, 2020 at 10:55 pm #1259986Hey Victoria,
Thank you so much.
That worked!
Your customer service really is amazing!Best regards,
JustusNovember 11, 2020 at 11:16 pm #1259997Hi Justus,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
VictoriaNovember 12, 2020 at 5:28 pm #1260184Hey, 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,
JustusNovember 13, 2020 at 2:39 am #1260251Hi,
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 ShannonNovember 13, 2020 at 1:10 pm #1260335Hi 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,
JustusNovember 14, 2020 at 7:01 am #1260458Hi Justus,
Please refer to this: https://kriesi.at/documentation/enfold/header/#transparent-header-on-mobile
Best regards,
RikardNovember 14, 2020 at 10:09 am #1260472or 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/
-
This topic was modified 3 years, 10 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.