Member Avatar for Jev181

My navigation bar doesn't load in the correct position the first time it is accessed through chrome and firefox. When you land on the page for the first time you have to use a secondary navigation I set up, and then return to the index page for the primary nav bar to be in the correct position. Once the page has been accessed and you return the page seems to load fine. Any ideas? you can view the issue @

www.advantagedenturerepair.com/2014_portfolio_site

  • 3 Contributors
  • 4 Replies
  • 335 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

This looks like a classic cold-load layout shift rather than a simple float/margin bug. The stray block at the top of the stylesheet that pointed out is a real red flag: a syntax error or misplaced bytes (BOM, stray characters before an @charset) can make browsers recover differently on a first parse versus a cached reload. Equally plausible causes are script-driven positioning that runs before images or fonts finish loading, or a webfont/asset that changes metrics only after it has downloaded — all of which would move the nav down by the 100–150px observed on first visit and then render correctly after a reload (cached resources).

Recommended debugging steps that narrow the cause:

  • Fix obvious CSS syntax errors first and ensure the stylesheet begins exactly with the @charset if used; run the file through a validator to catch parse problems.
  • Reproduce the problem with DevTools open and cache disabled, then compare the Computed/Styles panels for the nav on initial load vs after refresh to see which property actually changes (top, transform, margin, position).
  • Search the scripts for any code that sets nav offsets on DOMContentLoaded; if position logic runs before images/fonts load it will compute wrong values.
  • Temporarily disable custom fonts and large images (or give them explicit width/height) to see whether resource loading is the trigger.

Practical fixes that eliminate the fragility:

  • Prefer CSS layout (flexbox) so the nav flows into place without JS calculations:
    header { display: flex; align-items: center; justify-content: space-between; }
nav    { margin-left: auto; }
  • If JS must be used for positioning, run the calculation on window.load (or after font/image load) instead of DOMContentLoaded:
    window.addEventListener('load', positionNav);

Final notes: the discrepancy between ’s and ’s observations is consistent with a cache/cold-load issue. After correcting the stylesheet syntax and switching to a CSS-based layout (or delaying JS positioning until resources are ready), the intermittent initial offset should be resolved.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

I didnt see any issues other than it shifting to the left-right. If this is what you are talking about it is because some of your pages do not fit within the viewport so the scroll bar appears on the right side of the screen. when that happens, things shift left.

To remedy this, you can force to have the scroll bar visible regardless of the content on the screen. html { overflow-y: scroll }

other than that, I didnt see or experience any issues.

Member Avatar for jstfsklh211

no errors / issues for me either

Member Avatar for Jev181

Strange! It does seem to be working now in firefox however when I clear my browser history and reload the site in chrome the issue is still occuring.

Are you sure you were reffering to the correct Nav?

Upon landing in the index page there is a primary Navigation bar that should appear in the header on the right side. It is still showing around 100 to 150px below it's intended x-position inside of the blue header, but the Y-position seems to be correct. This occurs with a browser history cleared of the site info. It does rectify once you navigate from the index page and then return or you simply refresh the page.

Member Avatar for JorgeM

Ok, i see it now. When you first land on the site the nav menu is below the intended position. I couldnt see it because the text is white. When you refresh the page, it moves to the correct position.

I compared the styling that is applied for both the first landing and the refresh and they seem to be identical.

The only thing i see that i'm not familiar with is this in your CSS file, you have this at the top of the sheet.

@charset "UTF-8";
/* CSS Document */{

    margin: 0 auto 0 auto;
    text-align:left;
}

I would tend to think this issue has something to do with your style sheet. I cant seem to figure it out just by looking at the markup. If you cant figure it out, you may want to setup a mirror of this, start with an empty page, empty style sheet, add in the navigation menu first. If its fine, then continue to add in stuff until the problem returns.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.