Header Shifting sometimes

  • Hello,

    I am coding a custom wordpress theme for the first time. It is going well so far. Except for one tiny thing. Whenever I refresh my site a few times in a row, the top header (where the navigation bar is) shifts up and down. It’s very weird. Does anyone know why it does this?

    Here is the site: https://norademidesign.com/test/

    Thank you

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

  • Try validate markup and CSS, fix the errors that matter.

    Markup Validator
    https://validator.w3.org/

    CSS Validator
    https://jigsaw.w3.org/css-validator/

    Thread Starter NoraDemi

    (@norademi)

    Okay, I put it through the validators and nothing showed up that would cause this shift. I noticed it’s only happening with Safari and Chrome.

    Any other ideas?

    Thanks.

    There are some errors that should be corrected…

    But it looks like the problem is that you need a “clear” on this element:

    <div id="container">

    Thread Starter NoraDemi

    (@norademi)

    That didn’t work either, WPyogi. But I put a clear: both; on some other divs and it stopped shifting up and down. Now it’s not lining up across the logo.

    The CSS/HTML errors I have shouldn’t effect layout… right?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Now it’s not lining up across the logo.

    What isn’t?

    Thread Starter NoraDemi

    (@norademi)

    The Logo and the contact info and menu should be in one row. But sometimes sometimes it shifts, mostly when you first load the page. I think, for the life of me, why it’s doing that.

    You have no CSS for those elements – why is that? or do you have CSS errors that are breaking the CSS.

    Possibly add these – and then use a browser tool like Firebug to sort out the details:

    #main-wrapper img {
   float: left;
}

#inner-header-wrapper {
   float: right;
}

#container {
   clear: both;
}

    sometimes it shifts, mostly when you first load the page. I think, for the life of me, why it’s doing that.

    Possibly due to slow loading of CSS or browser caching or site caching.

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

Tags