Height on navbar not displaying correctly

Community resources General
#1

Hi

My navbar looks like it has some extra padding or margin at the top of it, when viewed in a browser (Chrome in my case) on all devices. In the designer it looks fine. I’ve checked through and can’t see anything amiss but expect I’m missing something.

I’d be very grateful for any help. Share link below.

Many thanks.

Share link: https://preview.webflow.com/preview/mortgagewithbadcredit-co-uk?utm_medium=preview_link&utm_source=dashboard&utm_content=mortgagewithbadcredit-co-uk&preview=4702ed782186ef65ec6f1eb0ff59e4c9&workflow=preview

#2

hi @GrahamCox your page is not published so it is not possible to check live page and see what you are talking about.

#3

Hi Stan

Thanks for your reply. The site is live, could you not see it when you visited?

Here’s a screenshot showing what I mean…

Thank you.

Graham

Link to anchor on page without fixed nav section overlap
#4

hi @GrahamCox the problem is with you position sticky. You can change your navbar position to fixed and align to top As this will take out navbar from standard flow your first section will hide under navbar as it will be aligned now to top Just add to your section padding-top to at least for navbar height.

As this is one-page design and links are pointing to different sections these padding should be revisited and adjusted accordingly (add padding to top and/or removing from bottom). Hope that will help you to solve this issue.

CleanShot 2021-08-09 at 12.31.16

#5

Hi @Stan,

Thank you very much, that’s fixed it.

Could I trouble you with one last question please.

If I increase the default text and dispay size settings on my android mobile, the hamburger navbar icon gets pushed out to the right of the viewport. Any idea how I stop this?

Thanks again.

Graham

#6

hi @GrahamCox sorry but I can’t help you with this as I can’t replicate this as I do not own any Android device and behaviour as you describing should be an issue on Android OS. I have tested increasing font size on iOS and I was able to increase size to 200% without any structural change.

When font size increased over 200% the burger get pushed under logo so it have normal behaviour as it is flex and doesn’t fit into screen. It should behave identical in Android, but I have no Idea why isn’t.

If you do not have further questions related to original topic and problem doesn’t persist, feel free to close your request as solved

#7

Hi @Stan

Absolutely no problem at all, I really appreciate your help.

I’ll mark this solved.

Thanks, Graham

1 Like
#8

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.