I don't want the desktop menu on the iPad

Design help General
1

I have done a menu, but I don’t wan the the desktop menu are showing up when scrolling out to 991 px.

Here is a little video: https://www.loom.com/share/0d6b2b83203b48a7891e2d7d807c5524

Here is my share link: https://preview.webflow.com/preview/samkoman-mizpa?utm_source=samkoman-mizpa&preview=ce39ab16aa4636a06b532f69517a9d6f&mode=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You would need to provide some custom CSS to target the iPad viewport dimensions and orientation you want to hide the desktop menu on instead of using the default WF breakpoints.

For example you could overwrite the default menu breakpoint behavior with CSS like this;

@media screen and (max-width: 1024px) {
    .w-nav[data-collapse="medium"] .w-nav-menu {
        display: none;
    }

    .w-nav[data-collapse="medium"] .w-nav-button {
        display: block;
    }

<-- add custom css here -->
}

Here is a handy guide.

3

Thanks a lot !! But where shall I put this code? Under “Home” and “costom code”? or below this: Before tag??

4

Project custom code → Head, wrapped in tags

5

I put it her, but it don’t work??

08
081608×1252 204 KB

her is the share link Webflow - Samkoman Mizpa

6

CSS has to be placed inside style tags as described in the university article I shared.

<style> your code here </style>
7

@webdev @neanea6060 oh my gosh, I replied to this yesterday and somehow my reply got saved as a draft! I’ve got to say, I looked and for me, the tablet menu (burger icon) showed up all the way through the tablet breakpoint, it didn’t show the desktop menu at the largest setting

8

then you didn’ see my video above.

9

Hi again Webdev! I put this code:

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

But it doesn’t work??

What to do??

10

As @webdev mentioned: wrap this code with the style tag - code

11

I don’t know style tag.
so it shall first be:
and after that: @media screen and (max-width: 1024px) { .w-nav[data-collapse=“medium”] .w-nav-menu { display: none; } .w-nav[data-collapse=“medium”] .w-nav-button { display: block; } }
and last:

12

have tried that, but it don’t work??

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

Insert this code ( tags are included :-)) -

14

Sorry I don’t understand this tag?
Where are they included?
Have try to put this as you said, but it don’t work:
@media screen and (max-width: 1024px) { .w-nav[data-collapse=“medium”] .w-nav-menu { display: none; } .w-nav[data-collapse=“medium”] .w-nav-button { display: block; } }

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

Now - included!

16

https://www.loom.com/share/b9bac8921da44c73bfc354ea9be06210

17

@neanea6060 yes I did see the video, no need to be snippy. I saw the video but couldn’t replicate it when I looked at your read-only link.

18

I don’t work as I show you in the video?
share link: https://preview.webflow.com/preview/samkoman-mizpa?utm_source=samkoman-mizpa&preview=ce39ab16aa4636a06b532f69517a9d6f&mode=preview

19

@neanea6060 - Adding custom CSS to the project, to force the display of the mobile menu at 1024px and under, is not going to change the behavior of the Webflow designer.

The code was provided so that the menu would collapse on the published site. If you are not familiar or comfortable using custom CSS code, I would suggest not going down this path and using Webflow’s defaults.

There is a wishlist item to provide the ability for designers to define additional breakpoints in the designer (Like an iPad Pro). Please feel free to vote for it.

For those of you that want to see this working, here is a very simple demo using the native navbar and custom CSS:
https://custom-breakpoints.webflow.io/

1 Like
20

thanks a lot Webdev! I have put your code into the project.

Please see my video of the live site. As you see, from about the desktop over to Ipad, there is NO absolut no menu?? So why is no menu about 20 pixel from desktop over to Ipad?
https://www.loom.com/share/7d686bca9b8d4ce592bb0bc4141a9f38