Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1430768

    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….

    #1430769

    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

    #1430773

    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

    #1431308

    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).

    #1431312

    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 2 months, 4 weeks ago by adapt. Reason: Added link to site in question
    #1431319

    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

    #1431322

    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?

    #1431330

    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

    #1431331

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

    Please mark this thread as “Solved”.

    Thanks once again :)

    #1431337

    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

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