I created a homepage with multiple sections, each linked to from the main menu:
<body>
<header>
<!-- nav used on all pages -->
<a href="#nav" class="toggle-nav">
menu <i class="fa fa-bars"></i>
</a>
<nav class="main-nav" id="nav">
<a href="/#item1">Link</a>
<a href="/#item2">Link</a>
</nav>
</header>
<!-- homepage -->
<main>
<section id="item1">some content here </section>
<section id="item2">some other content here </section>
</main>
</body>
Maybe this css is relevant:
body {
position: relative;
overflow-x: hidden;
}
@media only screen and (max-width: 750px) {
header .main-nav a {
display: block;
}
.tiggle-nav {
display: none;
}
}
The goal is for users to click on 'Item 1' in the menu and be taken directly to that section of the homepage.
This setup works perfectly, except on firefox mobile. When clicking the internal anchor link from any other internal page, the homepage loads anywhere from 100 to 200px off the mark.
Interestingly, refreshing the page after initially loading allows firefox mobile to find the internal anchor correctly. This issue seems exclusive to navigating from an internal page to the homepage.
What could be causing this problem? Is there a delay in loading CSS on firefox mobile until it locates the internal anchor?
Most importantly, how can I ensure firefox mobile lands on the correct location right away?
Any insights would be greatly appreciated.
View the full css and html live at