Header always visible on mobile

  • Resolved gramenauer

    (@gramenauer)


    7 years, 5 months ago

    Hi,

    I want header menu to be visible when scrolling on mobile version as it does on desktop version. Could you please help me?

    Thanks in advance and best regards,

    Antonio

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Jaroslav Svetlik

    (@jerryscg)

    7 years, 5 months ago

    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

    Thread Starter gramenauer

    (@gramenauer)

    7 years, 5 months ago

    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!

    Jaroslav Svetlik

    (@jerryscg)

    7 years, 5 months ago

    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

    Thread Starter gramenauer

    (@gramenauer)

    7 years, 5 months ago

    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

    Jaroslav Svetlik

    (@jerryscg)

    7 years, 5 months ago

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

    Menu behind header solution:

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

    Regards

    Thread Starter gramenauer

    (@gramenauer)

    7 years, 5 months ago

    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!

    Jaroslav Svetlik

    (@jerryscg)

    7 years, 5 months ago

    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

    Thread Starter gramenauer

    (@gramenauer)

    7 years, 5 months ago

    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

    Jaroslav Svetlik

    (@jerryscg)

    7 years, 5 months ago

    Change:
    z-index: 1;

    to
    z-index: 999;

    Regards

    Thread Starter gramenauer

    (@gramenauer)

    7 years, 5 months ago

    It works! Thank you very much :)))

    Best regards!

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

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