Header Area

  • Resolved Bo

    (@bolockwood)


    3 years, 4 months ago

    Hello Support,

    I installed your current upgrade to Sydney, and am really enjoying it. Thanks for this.

    I’m having a challenge with the header area and sticky menu.

    In the iPad view, the homepage header and sticky menu work great in the landscape view. When I turn the iPad to portrait view, a white area appears above the header area (which I don’t want) and the sticky menu stops working.

    On secondary pages, the sticky does not work in both the landscape and portrait views. Also, the header area is goofy. In the landscape view, the header only extends 95% of the way across the page, whereas on the homepage it goes 100% of the way. In the portrait, it adds the same white space above the header and it only goes 95% of the way.

    In summary, I am wanting the header to extend 100% of the way across without any white space above, while having the sticky menu work on all pages.

    Thank you, Bo

    • This topic was modified 3 years, 4 months ago by Bo.
    • This topic was modified 3 years, 4 months ago by Bo.

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

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

  • Hi Bo,

    I am sorry for the belated response.

    As checked, the white space shouldn’t be there by default. Perhaps it was added by one of your active plugins for particular settings enabled.

    To fix those two, try applying this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    @media only screen and (max-width: 1024px) {
  .site {
    margin-top: 0 !important;
  }
  
  #masthead-mobile {
    position: -webkit-sticky;
    position: sticky;
    top: 0;  
  }
}

    Hope that helps.

    Regards,
    Kharis

    Thread Starter Bo

    (@bolockwood)

    Hi Kharis.

    No sorry please. I always appreciate your help.

    The home page works well now, in both landscape and portrait views. The extra white area is no more, and the sticky menu is working. Thank you.

    The header area on the secondary pages remains and 95%, and the sticky menu isn’t working.

    Almost there. ??

    Best, Bo

    Hi Bo,

    Thank you for getting back.

    > The header area on the secondary pages remains and 95%, and the sticky menu isn’t working.

    Try adding this CSS code:

    body:not(.home) #masthead {
  width: 100%;
}

@media only screen and (min-width: 1025px) {
  body:not(.home) #masthead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;     
  }
}

    Hope that helps.

    Regards,
    Kharis

    Thread Starter Bo

    (@bolockwood)

    Works perfectly, Kharis!

    You are amazing at what you do.

    Thanks! Bo

    You’re welcome @bolockwood!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header Area’ is closed to new replies.