Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 24, 2019 at 6:34 pm #1058286
    restube

    Hey community,

    The header of my website works fine on desktop and portrait mobile.
    However when using portrait mobile the header becomes sticky and very (25% of total screen)
    How can i change it to the same design as when browsing in portrait (non sticky and 10% of total screen)?

    Cheers Dennis

    January 25, 2019 at 2:10 pm #1058729
    Rikard

    Hi Dennis,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    February 1, 2019 at 11:25 am #1061464
    restube
    This reply has been marked as private.
    February 3, 2019 at 4:10 pm #1062269
    Victoria

    Hi Dennis,

    The mobile menu does not stick on my end and the height in the header is only 80px, is it too much for you?

    Best regards,
    Victoria

    February 5, 2019 at 10:58 pm #1063395
    restube

    Hey Victoria,

    Yes, not on portrait mobile view (as in your Screenshot). When you turn your phone to landscape then the header appearance changes as described above

    Cheers
    Dennis

    February 7, 2019 at 11:01 pm #1064335
    Victoria

    Hi Dennis,

    Have you tried the shrinking header option?
    Image 2019-02-07 at 23.01.01.png

    Best regards,
    Victoria

    February 15, 2019 at 11:43 am #1067400
    restube

    Hey Victoria,

    yes, shrinking header is active on my website.

    Any other suggestions?

    Cheers
    Dennis

    February 19, 2019 at 6:12 am #1068767
    Mike

    Hi,
    Sorry for the late reply, try adding the orientation landscape to your media queries, such as this:

    @media only screen and (max-width: 812px) and (min-width: 375px) and (orientation: landscape) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none !important; 
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: block !important; 
  }
}

    Best regards,
    Mike

    February 20, 2019 at 10:19 pm #1069711
    restube

    Hey Mike,

    thanks for your reply. Unfortunately, it doesn`t seem like your code is changing anything.

    For clarification, the code needs to be inserted to the quick css in general styling, right?

    Cheers Dennis

    February 21, 2019 at 4:50 am #1069777
    Mike

    Hi,
    That was the idea, the thought was to change the max width for the mobile header layout so that it would cover phones in landscape>
    Instead, try going to: Enfold Theme Options > Main Menu > General > Menu Items for mobile, and change to 990px
    2019-02-20-214456

    Best regards,
    Mike

    February 21, 2019 at 5:22 pm #1070025
    restube

    Hey Mike,

    this time it worked out! Thanks for the help guys!

    Cheers
    Dennis

    February 22, 2019 at 3:09 am #1070166
    Mike

    Hi,
    Glad to hear, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Header sticky and too big on landscape mobile screens’ is closed to new replies.