Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #834561

    Hi, I just implemented the custom css on http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/ which is great– thank you! — but it doesn’t include the appended search icon (as the default css does now). Is there a way to include the the appended search icon with this css.

    I have the custom css set to (max-width: 1224px) and (min-width: 990px) — so if you look between those widths on https://newhorizons-sfv.org/ you can see the search icon is missing. At widths narrower than 990px, the default css kicks in and the search icon shows.

    Thanks and let me know if you have any questions.

    #834968

    Hey sky19er,

    You have this in your custom.css file:

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

    Could you try to remove it to see if that helps please?

    Best regards,
    Rikard

    #835185

    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.

    #837738

    Hi,

    Please include the following css codes inside your css media query.

    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
        display: block;
    }

    Best regards,
    Ismael

    #838128

    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;
    }
    }
    #838364

    Hi,

    Try inserting this code in that media query:

    #top .av_mobile_menu_tablet .av-main-nav #menu-item-search {
        display: block !important;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #838393

    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!

    #838419

    Hi,

    Try adding this code inside the media query:

    #top #header .av-main-nav > li#menu-item-search > a {
        font-size: 24px;
    }

    Hope this helps :)

    Best regards,
    Nikko

    #849253

    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.

    #849483

    Hi,

    It’s been a while. Could you please provide a screenshot of the issue? The mobile menu including the search icon looks fine on mobile view.

    Best regards,
    Ismael

    #849676

    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.

    #849841

    Hi,

    Thank you for the update. However, I don’t see any difference between the two screenshots. Is that the correct screenshot url?

    Best regards,
    Ismael

    #849853
    #850360

    Hi,

    Thank you for the update. Please try this code in the Quick CSS field.

    @media only screen and (max-width: 1224px) and (min-width: 768px) {
        .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a {
           height: 90px;
           line-height: 90px;
        }
    }

    Best regards,
    Ismael

    #850625

    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

    #850855

    Hi,

    We updated the code. Please try it again and don’t forget to remove the browser cache. This is the screenshot ( screen width: 1024px ).

    // https://imgur.com/a/j6GiA

    Best regards,
    Ismael

    #851130

    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.

    #851403

    Hi,

    What do you mean you updated the code?

    We updated the code above. We’ll add it again here.

    @media only screen and (max-width: 1224px) and (min-width: 768px) {
        .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a {
           height: 90px;
           line-height: 90px;
        }
    }

    The code looks the same but it’s not. Did you check the screenshot? Is that what you needed?

    Best regards,
    Ismael

    #852310

    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

    #852485

    Hi,

    I think you have an invalid css code or modification. The latest css modification that we suggested should not affect the desktop menu. Please post the login details here so that we can check the css modifications.

    Best regards,
    Ismael

    #852694

    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!

    #853671

    Hi,

    We modified the code in the Custom CSS field. Please remove browser cache or hard refresh before checking the page.

    NOTE: You should put every css media queries at the very bottom of the css field.

    Best regards,
    Ismael

    #853972

    OK, thanks so much!

    #854217

    Hi,

    No problem. Let us know if you need anything else.

    Best regards,
    Ismael

Viewing 24 posts - 1 through 24 (of 24 total)
  • The topic ‘Switching to mobile menu on higher resolutions’ is closed to new replies.