How to change mobile nav bar width from 991px to 1024px

Publishing help General
1

Hi Webflow,

I tried following these instructions on how to change the 991px max-width for mobile menu to 1024px but I am not able to get it working. The menu shows up at 1024px but still displays it in desktop view not the hamburger menu.

Here is the share link to my project: https://preview.webflow.com/preview/1024-mobile-nav?preview=19d00095e61481b935c903dfe5770260

I have given the mobile nav an id of #mobile-nav
Turned off visibility of the nav for desktop
Set a style attribute in the <head> tag on the home page to:

@media only screen and (max-device-width: 1024px) { #mobile-nav {display: block !important;} }

Any suggestions on what to do next?

Thanks

Shauncy

2

i’m not sure if i fully understand. but have you tried this?

CloudApp

3

Hi Nelson,

The problem is the break point on a iPad is 1024px so my menu still remains as the desktop menu on iPad not the mobile menu. So I am trying to override the default. Does that make sense?

30 PM
30 PM1050×659 531 KB

4

Set navbar to 100% and then set nav container to 100%. Lastly set a max width of 1024px and margin right and left to auto.

You will need to remove the custom code. You should be good.

5

Hi @AlexManyeki

I did what you suggested. It is still not changing the the desktop nav to mobile nav at 1024px.
http://1024-mobile-nav.webflow.io/

Let me know if I did something incorrectly.

Thanks

6

Oh sorry, I misunderstood your question. Here you go;

Switch the unit 1250px in the code with 1024px in the answer I have provided.

7

For quick ref;

<style>
@media screen and (max-width: 1024px) {
  .w-nav[data-collapse="medium"] .w-dropdown,
  .w-nav[data-collapse="medium"] .w-dropdown-toggle {
    display: block;
  }
  .w-nav[data-collapse="medium"] .w-dropdown-list {
    position: static;
  }
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}
</style>

paste in the head section of custom code

8

Hi @AlexManyeki

Thanks for your help sir. I’m getting closer to getting it working. The desktop nav disappears now at 1024px, but the hamburger menu doesn’t appear until I crush the browser to 991px still.

50 AM
50 AM989×120 7.41 KB

36 AM
36 AM1023×118 9.01 KB

9

This topic was automatically closed after 60 days. New replies are no longer allowed.