Switching to mobile menu on higher resolutions

Huh? That’s basically the bottom half of the code from http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/ — if I remove that, I’m left with both the burger AND the text version of the nav showing between those widths.

Sorry, that’s still not working for me — I’m still not getting the magnifying glass. Here’s what I have — I’m trying to show the burger AND the magnifying glass at anything less than 1224px — right now, only the burger is showing — what should I add to or remove from this media query? Thanks!

@media only screen and (max-width: 1224px) {
.av-burger-menu-main { 
     display: block!important; 
  }
#top .av_mobile_menu_tablet .av-main-nav .menu-item {
     display: none!important;
}
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
   display: block;
}
}

Thanks, getting closer, but the search icon is small — not big and blue, like your default mobile search icon — and the positioning of the burger and the search icon is a little lower/different than what you guys have in your code.

So now I get this between 1224 and 990:
https://www.evernote.com/shard/s320/sh/923bb6cf-2035-44e9-ba40-de48d0f0f3eb/

And this under 990:
https://www.evernote.com/shard/s320/sh/cee31b5f-3f32-4ddc-9ea3-dffd1a52a3a0/67271424d8d47dec3fb336c3aa23b158

I wish it could be as under 990 for both. Also, do I really need ALL this code?

@media only screen and (max-width: 1224px) {
.av-burger-menu-main { 
     display: block!important; 
  }
#top .av_mobile_menu_tablet .av-main-nav .menu-item {
     display: none!important;
}
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
   display: block;
}
  #top .av_mobile_menu_tablet .av-main-nav #menu-item-search {
   display: block !important;
}
}

Thanks!

That makes the search icon bigger, but the whole thing is still apparently being handled differently than it is in your default code, for below 990px width. The search icon is grey instead of blue, and both are positioned at the bottom of the header instead of at the top. Isn’t there a way to just do exactly what you do at 990, but at a wider width?

https://newhorizons-sfv.org/

Thanks.

Right, sorry, I thought I sent you a private reply back in August, but maybe it never went through.

Anyway, so, now, between 1224 and 990, I have this: https://www.evernote.com/shard/s320/sh/cab8e187-5a94-4f15-98f6-65a143cb23ee/5445ecdef82ee2312c3200df2cb8b530 — looks like the burger and search icon are aligned bottom in the header and the search icon is gray.

And under 990 it’s your default mobile css: https://www.evernote.com/shard/s320/sh/cab8e187-5a94-4f15-98f6-65a143cb23ee/5445ecdef82ee2312c3200df2cb8b530 — looks like the burger and search icon are aligned top in the header and the search icon is blue.

So, isn’t there a way to set your default mobile css to kick in at 1224 instead of 990?

Thanks again.

Oops, sorry — the second link should’ve been https://www.evernote.com/shard/s320/sh/a247515f-e3f8-4bc0-a2bb-c1794eb8c95e/eb89491c29bf0aa83b5a48823dc7ee52

Thanks, but that didn’t seem to work — here’s what I saw between those widths with that code: https://www.evernote.com/shard/s320/sh/e180d989-47b3-4a91-be1a-f9bfc8c41671/2cff916433d32c1a2ea185dac6e9b89b

What do you mean you updated the code? Where? What’s the new code? I flushed the cache, but I’m still seeing my same old custom css in my custom css plugin pane and I’m still seeing the same behavior/styling I described in https://kriesi.at/support/topic/switching-to-mobile-menu-on-higher-resolutions/#post-849676 — the same behavior/styling associated with my css.

Ah, I didn’t know you could update code in a previous post :) So, thanks again, but it’s still not working for me — now I’m seeing this between those widths (the menu moves up, but doesn’t switch to mobile): https://www.evernote.com/shard/s320/sh/3945db37-644a-4964-9ad2-63dd090135d5/8961e9e14954e293a4f5c9ee8c5ed23b

OK, credentials in Private Content. My custom css is in Appearance > Custom CSS. I added your css at the top. Note, right below that is some custom css I added to make sure there’s enough room in mobile views for the logo and background image in this header. Please let me know if you have any questions. Thanks!

OK, thanks so much!