Header always visible on mobile

Hello @gramenauer!

Try to add the next code to the code you already have.

nav.mobile-menu {
 position: fixed!important;
 width: 100%;
 top: 80px!important;
 height: 150px;
 overflow: auto;
 z-index:9999;
}

Regards

Thanks a lot. It works, but there is a space between header and deployed menu. How could I remove it?

Hi,

Insert the next code instead of the previous,

@media screen and (max-width: 992px) {
 .sticky-header.sticky-header-shrink {
  position: fixed !important;
   height:80px!important;
 }
 .sticky-header {
  box-shadow: none;
 }
 nav.mobile-menu {
  position: fixed!important;
  width: 100%;
  top: 80px!important;
  height: 150px;
  overflow: auto;
  z-index:9999;}
}

Or, set the smaller “Top” value.

Regards

Fantastic! Thanks a lot

Hi, again

After latest update of Agama theme, mobile fixed header has been misconfigurated.

I applied this code (site is https://bikebros.es.mialias.net):

@media screen and (max-width: 992px) {
.sticky-header.sticky-header-shrink {
position: fixed !important;
height:80px!important;
}
.sticky-header {
box-shadow: none;
}

nav.mobile-menu {
position: fixed!important;
width: 100%;
top: 80px!important;
height: 160px;
overflow: auto;
z-index:9999;
}
}

Many thanks in advance!

Hi,

Try to insert the next code instead the one you have currently:

@media screen and (max-width: 992px) {
 .site-header {
  position: fixed !important;
  height:120px!important;
 }
 
 nav.mobile-menu {
  position: fixed!important;
  width: 100%;
  top: 120px!important;
  height: 160px;
  overflow: auto;
  z-index:9999;
 }
}

Regards

Hi again. Thanks for you help. I tried the code, but last item of the menu (BLOG) is not shown when I open the burger menu. So I apply only this part of the code:

@media screen and (max-width: 992px) {
.site-header {
position: fixed !important;
height:120px!important;
}

Now, all the items of the menu are shown, but header menu looks odd: there is a grey area under header.

Also, after latest update of the theme, header v3 does not reduce when scrolling down.

(Just as a reminder: we are talking about mobile navigation of https://bikebros.es.mialias.net)

Thanks again for your help.

found the right code:

@media screen and (max-width: 992px) {
.sticky-header.sticky-header-shrink {
position: fixed !important;
}
#masthead.header_v3.shrinked #vision-mobile-nav {
margin-top: 67px !important;
position: fixed;
width: 100%;
z-index: 999;
}
}

thanks!