How do I stop hamburger icon disappearing off viewport?

Design help General
1

Hi

With regard to this website: https://www.mortgagewithbadcredit.co.uk

If I increase the default text and display 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 please?

Here’s the 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

Any help or suggestions would be much appreciated, thank you.

Graham

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

2

Hi

I’m still stuck on this issue unfortunately.

If anyone can help I’d really appreciate it. Thank you.

Graham

3

Hi again.

I’m still stuck on this issue with the hamburger icon disappearing off the viewport. If anyone can help me fix this I’d very grateful. Thank you.

Graham

4

Hi Graham,

Now, I could be wrong about this, but it seems your menu button is using the “em” unit for its padding size. This could be why that’s happening. The “em” unit is based off the relative parents font size. So, if that’s increasing, then so would the padding I’m thinking. Can you try, changing the padding units to a comfortable “px” unit instead and see if that works?

Screen Shot 2021-08-23 at 9.46.10 AM
Screen Shot 2021-08-23 at 9.46.10 AM1468×1236 96.5 KB

Hope this helps.
– Noah

5

Hi @Noah,

Thanks very much for your response. Unfortunately using px instead of em hasn’t helped.

Any other ideas? Thanks again.

Graham

6

Any way you can record what’s happening on your screen?

7

Hi Noah,

Please see this video…

and this one as the above video doesn’t seem to have recorded the larger text and display size for some reason…

Let me know if you need anything else.

Thanks

Graham

8

Thanks Graham!

Ok, so when you increase the font size, can you scroll all the way down to the footer and see if anything is sticking out? Because in the footer, I see a piece of text where you refer to the website url “MortgageWithBadCredit.co.uk” that is really long. And because there are no spaces, the word cannot wrap. This may be causing that to happen.

Can you check that?
Thanks,

– Noah

9

Hi @Noah-R,

Thanks for your help. I don’t think it’s that unfortunately. I changed the wording to make it much shorter and it’s still sticking out.

Thanks again.

Graham

10

Hey Graham,

I am sorry I couldn’t provide a solution. I don’t have an Android device nor an Android emulator so I can’t test the mobile chrome browser with those Android settings. However, I can’t help to think that it has to be an em unit somewhere that might be causing this. Only because I saw so many em units being used for positioning and spacing. Couldn’t say for sure though. Like when I increase the body font-size, the top and bottom padding start to increase on the brand logo in the navbar. Not the best place to use em units in my opinion.

I am sure someone else here will be able to provide a solution.
@vincent Any ideas?

– Noah R.

11

Hi @Noah-R

No problem, and thanks for all your help and feedback. I’ll look into the em issue and see if changing that fixes it.

Many thanks,

Graham