#77393 Issues when styling Hamburger Menu

Landing Forums JupiterX WordPress Theme Issues when styling Hamburger Menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • James Whitrow

    I’m trying to style the ‘Hamburger Menu’ widget for mobile as per the attached designs but am having some issues …

    1. When I set the container width to 100%, it limits the width to the width of the column that the burger menu sits in, rather than the width of the screen.
    2. After you click on the burger icon, the dropdown displays, but there is space at the top due to a div with class ‘jet-mobile-menu__controls’. I understand that this is relevant and needed for the sub-menu’s but it is not needed for the top level menu. How do I remove that space?

    I’m sure I will have more questions but need to get these two issues resolved before I can continue.

    http://52.64.62.215/~aussiedev/
    (please make sure you view in mobile configuration)

    Thanks,
    James

    Nodari Support Team

    Hello James

    I see a completely different mobile menu on your site, are you editing it right now? https://prnt.sc/u3aflm

    James Whitrow

    Hi Nodari,

    The completely different mobile menu you are seeing is exactly what the problem is. Please re-read my question. The images I attached are what I am trying to achieve.

    James

    Amir Rather Support Team

    Hi there

    Sorry for the delay,

    I set the Container width to 300px, now for other styling add the below CSS in Jupiter X > Customize > Additional CSS and let me know:

    .jet-mobile-menu__controls {
        min-height: 0 !important;
    }
    .elementor-2678 .elementor-element.elementor-element-ffbf61b .jet-mobile-menu__container .jet-mobile-menu__container-inner {
        margin-top: 28px;
        padding-top: 5px !important;
    }
    .jet-mobile-menu__item {
        padding-left: 15px;
    }
    jet-mobile-menu__container-inner {
        padding: 0 !important;
    }
    James Whitrow

    Hi Amir,

    Thank you for your response. I’m aware of how to set the container width and setting it to 300px is not what I want. I want it to dynamically be 100% of the width of the device, no matter how wide the device is. Surely you can see by the attached designs that this is what I am trying to achieve? It seems to me that there is a bug/misconfiguration of the container width setting when using %.

    Mohsin Al-Rabieai Support Team

    Hi James,

    Please accept my sincere apologies for the delayed response. Unfortunately, since the Hamburger menu is placed inside inner dom elements, it’s not possible to make it’s content full width without JS. If you wish to build such a menu for mobile, I recommend you use the Jet Popup plugin, create a popup and trigger it with a button like the hamburger menu. This way you can make your full-width menu instead of this.

    Bests

    James Whitrow

    Ok thanks Mohsin, will give it a go.

    Amir Rather Support Team

    Let us know if you need any assistance 🙂 Cheers

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic. Login