Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 17, 2024 at 4:48 am #1430768
    adapt

    Hi there

    I’m needing to activate the mobile menu at a earlier resolution than what is available in the Enfold dashboard – I need it to kick in from 1300px.

    I tried following the instructions posted previously here: https://kriesi.at/support/topic/activate-the-mobile-menu-past-990px/ (I changed max-width: 1024px to max-width: 1300px)

    But it doesn’t seem to do anything?

    Any help would be greatly appreciated….

    January 17, 2024 at 5:31 am #1430769
    chrissommer

    hi im really sorry to post here but i have this theme and paid for 6 months support and i have a question, i cant for the life of me figure out how to contact anyone to help me

    January 17, 2024 at 8:57 am #1430773
    Yigit

    Hi,

    Please refer to this post: https://kriesi.at/documentation/enfold/menu/#burgermobile-menu-activation. After adding custom CSS, please make sure to clear any server-side, plugin-based, and browser caches.


    @chrissommer     I replied to your thread. Let us continue there.

    Regards,
    Yigit

    January 17, 2024 at 9:12 pm #1431308
    adapt

    Hi @Yigit

    Thanks for the response. I pasted in the code from the page you linked to (under “Burger/Mobile menu activation – Custom Screen Width”):

    /* Activate burger menu */
 @media only screen and (max-width: 1300px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}

    However, even after clearing server, CloudFlare and Chrome caches, there was no change – the burger menu didn’t activate until the tablet resolution (“Activate for Smartphones and Tablets (browser width below 990px” in the “Menu Items for mobile” subheading in the Enfold > Main Menu options that I’d set).

    January 17, 2024 at 10:43 pm #1431312
    adapt

    Actually I stand corrected – the Burger Menu actually does appear at the 1300px width.

    However, the top menu is still there as well, and that doesn’t completely disappear until 990px.

    Does it make a difference that I’m using the “Max Mega Menu” plugin?

    The site in question is posted in the private content section below:

    • This reply was modified 11 months, 1 week ago by adapt. Reason: Added link to site in question
    January 18, 2024 at 1:23 am #1431319
    Nikko

    Hi adapt,

    Can you try to use this CSS code instead:

    @media only screen and (max-width:1300px) {
    #mega-menu-wrap-avia .mega-menu-toggle {
        display: flex;
    }

    #mega-menu-wrap-avia .mega-menu-toggle + #mega-menu-avia {
        display: none;
    }
}

    Hope it helps.

    Best regards,
    Nikko

    January 18, 2024 at 1:32 am #1431322
    adapt

    Ah yep, that’s closer @Nikko – now it’s hiding the main menu. Thank you.

    However, when clicking the burger menu at that resolution, nothing happens (ie the menu doesn’t appear).

    It’s fine at mobile resolutions – if I click the burger menu, the menu appears/drops down.

    But at 1280×720 for example, clicking the burger menu – the dropdown doesn’t appear.

    Would it be safe to assume something is “hiding” it? I can’t see anything in CSS that might be doing it, but I’m probably just missing it?

    January 18, 2024 at 4:11 am #1431330
    Nikko

    Hi adapt,

    I missed some key CSS code, please try to change the code I gave with this one:

    @media only screen and (max-width:1300px) {
    #mega-menu-wrap-avia .mega-menu-toggle {
        display: flex;
    }

    #mega-menu-wrap-avia .mega-menu-toggle + #mega-menu-avia {
        display: none;
    }

    #mega-menu-wrap-avia .mega-menu-toggle.mega-menu-open + #mega-menu-avia {
        display: block;
    }

    #mega-menu-wrap-avia .mega-menu-toggle + #mega-menu-avia {
        background: #e9e9e9;
        padding: 0px 0px 0px 0px;
        position: absolute;
        width: 100%;
        z-index: 9999999;
    }

    #mega-menu-wrap-avia #mega-menu-avia > li.mega-menu-item {
        display: list-item;
        margin: 0;
        clear: both;
        border: 0;
    }

    #mega-menu-wrap-avia #mega-menu-avia > li.mega-menu-item > a.mega-menu-link {
        border-radius: 0;
        border: 0;
        margin: 0;
        line-height: 40px;
        height: 40px;
        padding: 0 10px;
        background: transparent;
        text-align: left;
        color: #0db665;
        font-size: 14px;
    }

    #mega-menu-wrap-avia #mega-menu-avia > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
        background: #0db665;
        color: white;
        font-weight: bold;
        text-decoration: none;
        border-color: #fff;
    }
}

    Best regards,
    Nikko

    January 18, 2024 at 4:39 am #1431331
    adapt

    Awesome! That works perfectly. Thank you very much @Nikko – much appreciated :)

    Please mark this thread as “Solved”.

    Thanks once again :)

    January 18, 2024 at 9:23 am #1431337
    Rikard

    Hi,

    Great, I’m glad that Nikko could help you out. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Activate Mobile Menu at higher resolution’ is closed to new replies.