Header always visible on mobile

Resolved gramenauer
(@gramenauer)

6 years, 11 months ago

Hi!

I set header menu fixed on mobile using this code:

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

But when I scroll down and tap on burger menu, I cannot see menu since it deploys on the top of the page.

Could you please help me? Thanks in advance!

The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

Theme Author themevision
(@themevision)

6 years, 11 months ago
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
Thread Starter gramenauer
(@gramenauer)

6 years, 11 months ago

Thanks a lot. It works, but there is a space between header and deployed menu. How could I remove it?
Theme Author themevision
(@themevision)

6 years, 11 months ago
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
Thread Starter gramenauer
(@gramenauer)

6 years, 11 months ago

Fantastic! Thanks a lot

Thread Starter gramenauer
(@gramenauer)

6 years, 10 months ago

Hi, again

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

I applied this code (site is http://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!
Theme Author themevision
(@themevision)

6 years, 10 months ago
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
Thread Starter gramenauer
(@gramenauer)

6 years, 10 months ago

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 http://bikebros.es.mialias.net)

Thanks again for your help.

Thread Starter gramenauer
(@gramenauer)

6 years, 10 months ago

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!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Header always visible on mobile’ is closed to new replies.