I don't want the desktop menu on the iPad

Design help General
21

Because you have a styled element (hamburger icon) that will require you grab the CSS for it and place it into the media query.

22

Hi again Webdev! I really don’t understand what I shall do or what you mean. Could you please be so kind to send me a video and explain to me how I do this? I didn’t think it would be so incredibly difficult to get a hamburger menu on the entire Ipad area from 999 px and downwards … I would be so happy if you could explain me by sending me a video on how to do it . I attach my sharelink: https://preview.webflow.com/preview/samkoman-mizpa?utm_source=samkoman-mizpa&preview=ce39ab16aa4636a06b532f69517a9d6f&mode=preview Thank you so much :smiling_face_with_three_hearts:

23

Place the webflow generated CSS for your Nav element (.menu-button-3) into the CSS media query you placed into the head.

.menu-button-3 {
    width: 70px;
    height: 70px;
    margin-right: 0px;
    padding-top: 21px;
    background-color: transparent;
    background-image: url("https://assets.website-files.com/5cf589636e00f5adbb4088a4/5cf5896a42008162d55228c4_menu%20(2).svg");
    background-position: 50% 50%;
    background-size: 32px;
    background-repeat: no-repeat;
  }

CloudApp

24

Thank you so much Webdev!!

I put 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; } }

.menu-button-3 {
width: 70px;
height: 70px;
margin-right: 0px;
padding-top: 21px;
background-color: transparent;
background-image: url(“https://assets.website-files.com/5cf589636e00f5adbb4088a4/5cf5896a42008162d55228c4_menu%20(2).svg”);
background-position: 50% 50%;
background-size: 32px;
background-repeat: no-repeat;
}

But it don’t works?
Why is this so difficult? I thought I had a very little bit problem. But it seems to be a BIG problem?
It looks like this after I put the code in inside the tag: https://www.loom.com/share/915972fc652d478a9cd1c883538b4113

25

The code needs to be wrapped in tags. Like so:

@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; } } .menu-button-3 { width: 70px; height: 70px; margin-right: 0px; padding-top: 21px; background-color: transparent; background-image: url(“https://assets.website-files.com/5cf589636e00f5adbb4088a4/5cf5896a42008162d55228c4_menu%20(2).svg”); background-position: 50% 50%; background-size: 32px; background-repeat: no-repeat; }

That’s all that everyone has been saying.

It should be placed under “Custom Code” in the project settings in the first section that says something like place code before .

2 Likes
26

OK. thank you!
No “style”?
Sorry , It don’t worked?

27

Please check out this video: Loom | Free Screen & Video Recording Software | Loom

28

Thanks a lot Brandon! this solve my problem!!
Thanks a lot!!! :heart_eyes: