Header drops down on large screens

  • For my homepage, my header drops down, when fully zoomed out on a desktop screen. All other pages work fine.

    See this screenshot.

    I am using a cover image for a fullscreen background. I have also added custom CSS code to remove the footer and disable scrolling.

    Is there a way to keep the header fixed at the top of the screen, like on this example website.

    Thanks in advance!

    • This topic was modified 2 years, 1 month ago by theye.
    • This topic was modified 2 years, 1 month ago by theye.
    • This topic was modified 2 years, 1 month ago by theye.
    • This topic was modified 2 years, 1 month ago by theye.

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

Viewing 1 replies (of 1 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @theye look like it’s something you’ve added to your custom CSS causing this. I removed your custom CSS in the browser inspector, and the header doesn’t drop nearly as much.

    Looks like this piece is the culprit:

    /* no scrolling on home page*/
.page-id-13 {
    overflow: hidden;
    margin: 0;
    height: 130px;	
}

    I would suggest removing it. Defining the homepage height at 130px doesn’t really make sense, and it’s not a good accessibility or usability practice to bypass a browser’s default scrolling capability.

Viewing 1 replies (of 1 total)
  • The topic ‘Header drops down on large screens’ is closed to new replies.