How to change menu collapse break point?

Design help General
1

Hi

On tablet landscape on the page below the nav links are being pushed down.

https://www.simplyadverse.co.uk/lp3/new-home

Is there anyway to set the desktop view to change to a hamburger icon if the width is less than say 1024 pixels? What’s the best way to handle this please? We don’t want to change the nav link copy if we can help it.

Share link below.

Thanks a lot

Graham

Here is my site Read-Only: https://preview.webflow.com/preview/simplyadverse-website?utm_source=simplyadverse-website&preview=aaa8b347e22972176c3e4c02c8608f61
(how to share your site Read-Only link)

2

Hi again,

Just giving this a nudge please as it’s the last thing we need to address before we go live.

Does anyone know any way to address this with either media queries in the or some other method?

Many thanks.

Graham

3

Add screenshot of the problem. Its hard to understand what you trying to do.

“wrapping” is very general term. You talk about change the point the menu collapse (From regular desktop-nav to mobile/hamburger nav?)

By deafult the menu collapse in 991px W

4

@Siton_Systems

Thanks for your reply. So the navlinks on the white top nav are getting pushed down onto the hero image on tablet landscape. So yes I was wondering is there any way of changing to a hamburger menu if the screen width falls below a certain width.

Here’s a screenshot showing the issue…

nav%20links%20pushed%20down
nav%20links%20pushed%20down842×630 64.9 KB

Cheers, Graham

5

OK. In the future ask more practical Q like: "how to change menu collapse break point?" or something more practical (“How to fix links” is wrong title).

Try this (Put before head):

<style>
@media screen and (max-width: 1500px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

</style>

In your case change to 1400px.

Example for 2500px:

image
image1001×464 21.2 KB

6

Hi @Siton_Systems,

Point taken and thanks very much for your help.

So just to confirm I need to stick this in a custom html embed code snippet (set to 1400px max-width) that is placed before the body? Not in the section itself?

Thanks

Graham

7

My code related to the original navbar (See screenshot). First try this code and see the result.

8

Just placed the code in the custom code head section and it’s done the trick. Hamburger icon appears. Many thanks!

Cheers, Graham

9

Great :slight_smile:

Mark as a solution (For future searches about this topic).

In general, if someone read this post - if you set both to block (No reason why) - you get this result (Hamburger & desktop menu). So the trick is to show1/hide2 on opposite.

image
image802×394 17.4 KB

  • Over time maybe the code of the webflow core menu will change (Answer related to 2018)
10

Done, many thanks :smiley:

1 Like