Header always visible on mobile

Hello @gramenauer,

Add next CSS code to Appearance -> Customize -> General -> Additional CSS

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

Best Regards

• This reply was modified 6 years, 3 months ago by jerryscg.
• This reply was modified 6 years, 3 months ago by jerryscg.

Hi, @jerryscg

Thanks a lot for your help. I have added the code, and the menu is visible now. But if I tap on burger icon to display the menu, it does not appear (I have to go to the top of the page to get it). Is there any way to make it appear?

Thanks again!

Replace above CSS code with next one:

@media screen and (max-width: 992px) {
   .sticky-header.sticky-header-shrink {
       position: fixed !important;
   }
   #vision-mobile-nav {
      position: fixed;
      width: 100%;
      z-index: 1;
   }
}

Regards

Hi again, @jerryscg

The menu is shown now, but it starts behind the header, not below it. You can see what I mean on mobile version of ficons.es

By the way, is it possible to remove the white space between header and the first image on the homepage?

Thanks in advance

White space solution:
.sticky-header { box-shadow: none; }

Menu behind header solution:

#masthead.header_v3 #vision-mobile-nav { 
     margin-top: 67px !important; 
}

Regards

• This reply was modified 6 years, 3 months ago by jerryscg.

Hi, Jerry

Menu behind header solution works when I am not at the top of the page. If so, the menu is not shown

Regarding white space between header and image, the provided solution does not work, I am afraid.

I am keeping the CSS code on the page for you in case you want to check it. (FYI, I am testing on an iPhone7, safari)

Best!

Replace (above given solution):

@media screen and (max-width: 992px) {
   .sticky-header.sticky-header-shrink {
       position: fixed !important;
   }
   #vision-mobile-nav {
      position: fixed;
      width: 100%;
      z-index: 1;
   }
}

With:

@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: 1;
   }
}

The whitespace issue needs more time for inspecting so i will try to give you solution later.

Regards

• This reply was modified 6 years, 3 months ago by jerryscg.

Thanks again. So, I have removed all the previous code, and inserted this one:

@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: 1;
}
}

Now, I can see the menu in all the page except on the upper carousel. Here, the menu is still shown behind the image.

Cheers

Change:
z-index: 1;

to
z-index: 999;

Regards

It works! Thank you very much :)))

Best regards!