Navbar Moves to 2 lines on Browser Resize

Design help General
1

Hello,

I’m having issues with the browser responsiveness and moving my nav links to another line with smaller browsers. I’ve found a similar topic, but no response helped my issue. I have attached a link for the issue that is similar: Weird issue with heading going on two lines - #3 by GrahamCox

I appreciate any help you can provide.

Here is my site Read-Only: https://preview.webflow.com/preview/clement-truck-driving-academy?utm_medium=preview_link&utm_source=dashboard&utm_content=clement-truck-driving-academy&preview=1083f658207b0821d074ab4d008080e6&mode=preview
(how to share your site Read-Only link)

2

Hi @Austin_Clement it seems your nav bar is blocking the view of the hamburger, so try this.

On landscape view, add a fixed height to Content Wrapper class of 53px.

Then, add to Nav Menu 50px on the top margin and remove all padding.

This should solve your problem.

PS: % height on mobile generally acts funny, so its better to have some fixed heights to have better control.

3

Sorry, can you elaborate a bit on this one? Is this in mobile view?

Edit: Adding a fixed height to Content Wrapper class moved my footer up under the video.

4

I edited these (hopefully correctly) and it has not changed anything, but did skew the rest of the site. Apparently everything is dependent on the navigation size and properties?

5

hi @Austin_Clement, it seems the content wrapper you used on the nav bar is attached to all the content in the website.

Try adding an additional class to the content wrapper on the menu that will identify the one in the nav bar. This one will be the one you add the fixed height of 53px.

Also, I noticed you have several fixed elements inside each other. Some devices don’t work well with this practice. I recommend you stick to fix only the parent elements!

6

@Carlos_Ruiz_Del_Vizo: I have fixed that. The part I’m now confused about is adding 50px to the top margin of the Nav Menu. Would you mind elaborating on that?

Thank you so much for your help.

7

Screen Shot 2020-07-01 at 12.44.41 PM
Screen Shot 2020-07-01 at 12.44.41 PM1598×808 248 KB
See the screenshot of the style for the nav menu class.

8

@Carlos_Ruiz_Del_Vizo: I made those changes and the overflow is the same: Screenshot - a064855da70c893dc72e11a536a40fa6 - Gyazo

9

@Austin_Clement This happens because the size of the container is not enough for the amount of elements inside. As you can see only happens right before changing to tablet view.

Two solutions:

  1. Remove tabs.
  2. Increase the width of the container.