Navbar Symbol Different on Just The Homepage

[Rebecca_Lowe]

Hey there,

I am scratching my head HARD on this one:

Here is my read-only link: https://preview.webflow.com/preview/voxtell-com?utm_medium=preview_link&utm_source=designer&utm_content=voxtell-com&preview=a228f0c14688f20d906e670f134d6166&mode=preview

There is a symbol for the navbar “Voxtel Main Navbar” which is on almost every page of the site. For some reason, on the homepage, this navbar seems to have different spacing than all the other navbars. You can see it clearly when you open the mobile nav menu on the homepage compared to the other pages…The menu covers parts of the navbar on the homepage…

It makes ZERO sense because all the navbars should be exactly the same as they are in the same symbol. I have checked to see if maybe the Body had a different class and it was somehow effecting the navbar on the homepage but they all have the same Body class.

Could someone please give me some assistance on this? I’m beginning to think it might be a bug of some sort at this stage.

Thanks!
Bec

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Oli.Timmis (Oli)]

Hey there Bec,

It’s because your .brand element in the Navbar (which always links to the homepage), has 15px of top and bottom padding applied to the .current state.

So on every other page than the homepage, the .current state is not active, meaning that 15px top and bottom padding is not present.

So you either need to add that padding to the normal state, or remove it from the .current state. Either will fix the problem

[Rebecca_Lowe]

@Oli.Timmis legend! Thank you.

[Oli.Timmis (Oli)]

@Rebecca_Lowe no worries! Please can you mark my answer as the solution, so people know the problem has been solved/the thread is closed.