Streaming live at 10am (PST)

Mobile Nav Bar - Great in Preview Wrong in Reality

Hi, The nav Bar on my clients site looks great on preview for mobile landscape / portrait. When I look on my iPhone (XR, Ithink!) the phone number is not above the email as I want but to one side and I can’t find any reason for this. Can anyone help please? The actual site is https://www.sweetnam-bradley.com/

Thank you


Here is my site Read-Only: https://preview.webflow.com/preview/sandb?utm_medium=preview_link&utm_source=dashboard&utm_content=sandb&preview=4015b7ca322baee73cffb2ee2394477b&mode=preview
(how to share your site Read-Only link)

Hey @Roxzfr,

I tested on the iPhone XR (and other iPhone models) and confirm that the phone number does end up on the side as you described.

What’s the cause?.. I notice that the issue doesn’t occur on apple devices using a browser other than Safari.

Safari is recognising the phone number and automatically adding text-decoration (in the form of a clickable link) and that is affecting the layout within the height of the grid cell.

What to do?
Well, you could try to set the Paragraph 2 element (phone number and email address) to text-decoration: none (even though by default it is set as none, this should force it to be none - thanks to Safari trying to be helpful)

Or, create a defined height for your nav to allow more height in the grid cell,

Or, you could create a 2 line nav with the phone number and email address above the nav links. (More space)

Let us know how you do.
Regards,
Keiran

Thank you @knk - I will try all of the above.
Much appreciated
Roxzanne

1 Like

Checked on an Android device on various browsers to see if the problem existed in any other devices/browsers and it looks absolutely fine. Nothing wrong with your development, it’s simply what @knk suggested. The problem exists only in Safari browsers, which is mainly found on Apple devices. Set text-decoration to none and you should be fine.

1 Like