Icon in Nav bar is hiding when I decrease the size in desktop version

Design help General
1

Hi,

I have issue in the navbar . As I decrease the size in desktop version to 1200px or below ,the icon is hiding (Here facebook icon is not visible on decreasing the size).

Can someone help me with this issue?

Thanks

Here is my site Read-Only: Webflow - Fitness Site Rebuild

2

It looks like you can do a few things to accommodate the number of elements in the nav.

  1. Remove the link that says “Home” since your logo already functions as a home button and most users expect this
  2. Decrease the padding on your nav links and dropdowns some. (I tried 15px rather than 20)
  3. Remove the fixed pixel width on the “Book a Session” and “Contact” links
  4. Remove all margin settings on the facebook icon (Note that each icon should be wrapped with its own link div. You have both icons in one div)
  5. Remove the 32px right margin from the Instagram icon
  6. Apply “wrap” on the “Nav Menu 3” element

With these edits, I was able to keep your facebook icon in view before the menu switches to mobile version.

3

@Port_of_Folio . Thanks for your tips. I implemented the changes you mentioned. Although now fb icon is not hiding when I decrease the size in desktop mode. But it is moving to second line if I go to 1025x or below. is there any way it can be avoided?

4

If everything needs to stay on one line, you’ll just need to keep searching for ways to reduce the width of your nav contents. Take out more padding, etc.
I tried setting your menu text to 1.2 VW which seems to work.