-
Posts
-
Hi!
I have found several forums discussing the options for making a header sticky on mobile. I am able to get the header to stick, however, as some people also noted, padding isn’t added to the top in order to allow for the header height. The page contents just need to bump down to accommodate the sticky header height on mobile and tablets. The following is what I currently have, but without luck (trying it with all three included):
:
@media only screen and (min-width: 768px) and (max-width: 990px) {
.html_header_top.html_header_sticky #top #wrap_all #header {
position: fixed;
}
.responsive #top #main {
padding-top: 150px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 990px) {
.responsive .content {
padding-top: 150px;
}
}
@media only screen and (min-width: 768px) and (max-width: 990px) {
.home #layer_slider_1 {
padding-top: 150px;
}
}Hey webdesign,
Please provide a link to the site/page in question so we can look into this issue further.
Best regards,
Jordan ShannonHey!
Sorry for the late response. We provided a solution in the following thread.
// https://kriesi.at/support/topic/sticky-colored-menu-button/#post-1160137
The css code there should push the main container downwards and prevent the header from covering the slider.
Regards,
IsmaelHey Ismael,
Thanks for the reply. I added your code but it is not having any affect. I have cleared my cache, tried my mobile in incognito, etc. I even maxed out the padding to 500px see if I could make the space huge, and nothing changed. This what I currently have for the sticky header, including your code, and the sticky header is still covering the contents of the page:@media only screen and (min-width: 768px) and (max-width: 990px) {
.html_header_top.html_header_sticky #top #wrap_all #header {
position: fixed;
}
}
@media only screen and (max-width: 767px) { .responsive #top #main {
padding-top: 110px !important;
margin: 0;
}
}Hi,
Thank you for the update.
Can we access the dashboard? We would like to test the css code. Do you need the header fixed on mobile devices?
Best regards,
IsmaelHey Ismael! Yes! We are supposed to launch today. And, yes, this is a one page website and I want it to be a sticky header on mobile so the user has access to the menu at all times (this is where the main call to action “colored menu button” resides). I can’t launch it with the way it looks on mobile and I will have to disable the sticky header until the padding is resolved. For now, the coding is active, but by the time you log in, the coding might be commented out (since it isn’t working on mobile). I still want it to work, so please see what you can do. I really appreciate the help!
Hey Ismael! I was able to get this resolved today. By using the code in the “additional css” area, not my child theme css stylesheet, the following worked so the sticky header no longer covers up the top content of the pages:
@media only screen and (max-width: 767px) {
.responsive #top #main { padding-top: 110px!important; }}And for reference if it’s helpful to others, I used this code in my child theme css stylesheet to actually make the navigation header stick on mobile:
@media only screen and (min-width: 768px) and (max-width: 990px) {
.html_header_top.html_header_sticky #top #wrap_all #header {
position: fixed;
}It’s not clear to me why the padding wouldn’t work in my child css, but it works, so I’m happy!
Thank you again!!
- The topic ‘Sticky header on mobile covers up page content’ is closed to new replies.