In the generated markup for the homepage you’re still having the same issue, just in a different order now.
This is the markup for the links on the homepage:
<div class="mr-auto navbar-nav">
<a href="#" class="nav-link" role="button">
<a aria-current="page" class="sc-AxjAm bcMPWx" href="/">Homepage</a>
</a>
<a aria-current="page" class="sc-AxjAm bcMPWx" href="/">
<a class="sc-AxjAm bcMPWx" href="/pricing">Pricing</a>
</a>
<a href="#" class="nav-link" role="button">
<a class="sc-AxjAm bcMPWx" href="/about">About</a>
</a>
<a class="sc-AxjAm bcMPWx" href="/pricing">
<a class="sc-AxjAm bcMPWx" href="/contact">Contact</a>
</a>
</div>
See how there are now two links without the nav-link
class and the contact page is wrapped in the “pricing” anchor tag.
I can assure you that is definitely causing your layout problem, although without seeing your local code it’s hard to say why it’s just building the initial load of the homepage like that.
Here the same markup when you click onto another page or then back to the homepage:
<div class="mr-auto navbar-nav">
<a href="#" class="nav-link" role="button">
<a aria-current="page" class="sc-AxjAm bcMPWx" href="/">Homepage</a>
</a>
<a href="#" class="nav-link" role="button">
<a class="sc-AxjAm bcMPWx" href="/pricing">Pricing</a>
</a>
<a href="#" class="nav-link" role="button">
<a class="sc-AxjAm bcMPWx" href="/about">About</a>
</a>
<a href="#" class="nav-link" role="button">
<a class="sc-AxjAm bcMPWx" href="/contact">Contact</a>
</a>
</div>
Notice here they are all using the nav-link
class, no generated classes and there is no issue with contact being wrapped in the link of “pricing”.
Do you see this issue on the production build locally? You can see this by first running gatsby build
then gatsby serve
.