Why is there a gap between nav bar and the alphabet navigation?

[skinpores]

We want the alphabet navigation to be sticky right below the nav bar upon scrolling. Looks ok on desktop, at least when we viewed it via a 13" screen.

But on smaller screen sizes, there’s always a gap! We tried using %, px, vh…

How can we set the sticky alphabet navigation to be directly underneath the navbar?

Thanks in advance!

---

Here is my site Read-Only: LINK

[Jonathan_Holden]

looks like you’ve fixed this one?

[skinpores]

Hiya,
No. We wish! On our screen, when we switch to mobile landscape or mobile portrait, there’s a gap - you can see the paragraphs creeping behind the alphabet navigation as you scroll…

[skinpores]

This happens when we preview on tablet and mobile:

Maybe it’s just our screen?

[guoshuzhang]

@skinpores try increase padding

[skinpores]

Hi! Thanks for your input. We played around with the padding…and realised that the gap still exists in some screen sizes.

So to add on to your solution, we decreased the top position by 5px for each break point smaller than desktop. Did the trick! Thank you!

[gurkhainn]

try to increase padding