Force Hamburger Menu Across All Sizes - Luxe Theme

Store Design
, ,
1

I am using Luxe theme for my site and running into what I see for some others. I have tried adding code to the base.css file (a few different recommendations) but none have worked. I want the Hamburger Menu across all sizes. I feel like I’m missing something else but I’m not comfortable enough with coding to dive deeper in. If anyone can help, I would appreciate it.

2

Hi @LookingGoodLouis

I think 3 components are in play. Mobile menu button, desktop menu text and slide out menu. So try to add followiing code at end of
/assets/component-header.css so it overrides, styles for specific size.

 .hb-inline:not(.bp-wide):not(.bp-extra-wide):not(.bp-extra-extra-wide):not(.bp-null) .hdr-nav-desktop {
    display: none;
}

.hb-inline:not(.bp-wide):not(.bp-extra-wide):not(.bp-extra-extra-wide):not(.bp-null) .hdr-menu-button {
    display: block;
}

.hb-inline:not(.bp-wide):not(.bp-extra-wide):not(.bp-extra-extra-wide):not(.bp-null) .header-nav-drawer {
        display: block;
}

Note, personally, I am against showing a hamburger on a desktop as it is an additional click for customers, but it can look minimal and clean.

3

Thanks. That unfortunately didn’t work. Am I missing something? I added it at the end of component-header.css but the full menu is still appearing on desktop.

The reasoning, in addition to the clean look, is that the full menu encroaches on the logo at certain sizes

4

Hey @LookingGoodLouis ,

Thank you for reaching out. I understand you want the Hamburger Menu visible across all screen sizes on your Luxe theme. The issue usually arises because the theme is designed to display the full navigation on larger screens and the hamburger only on mobile by default. Simply adding CSS to base.css often isn’t enough, as the HTML structure and JavaScript controlling the menu also need to support this change.

To implement this properly, we can:

  1. Modify the CSS – Force the hamburger menu to display at all screen sizes and hide the default desktop menu.

  2. Adjust JavaScript if needed – Ensure the menu toggle works correctly on larger screens.

  3. Test responsiveness – Make sure the menu functions perfectly across all devices without breaking the layout.

I can handle this for you quickly, ensuring the Hamburger Menu appears consistently across all screen sizes without affecting other parts of your site.

If you like, I can prepare a ready-to-deploy solution and implement it safely on your store.

Best regards,

Rajat | Shopify Expert

5

Hi @LookingGoodLouis,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media only screen and (min-width: 1025px) {
    .hb-inline:not(.bp-wide):not(.bp-extra-wide):not(.bp-extra-extra-wide):not(.bp-null) .hdr-menu-button {
        display: flex !important;
    }
    .hb-inline:not(.bp-wide):not(.bp-extra-wide):not(.bp-extra-extra-wide):not(.bp-null) .hdr-nav-desktop {
        display: none !important;
    }
    .hb-inline:not(.bp-wide):not(.bp-extra-wide):not(.bp-extra-extra-wide):not(.bp-null) .header-nav-drawer {
        display: block !important;
    }
}

If I helped you, then a Like would be truly appreciated.

6

OK @LookingGoodLouis

Could you share a link to your store?

7

I created a duplicate for this one. I don’t know if I’m not engaging the new code in the right way or what but I tried both solutions offered on this page and neither worked.

it is www.amuninni.com

pw is amucoding

8

Thank you for sharing that.

Try to remove this part, around line 3715 of component-header.css


@media only screen and (min-width: 1450px) {
    .hb-inline:not(.bp-extra-extra-wide):not(.bp-null) .hdr-nav-desktop {
        display:block;
        height: 100%
    }

    .hb-inline:not(.bp-extra-extra-wide):not(.bp-null) .hdr-menu-button {
        display: none
    }

    .hb-inline:not(.bp-extra-extra-wide):not(.bp-null) .header-nav-drawer {
        display: none
    }
}

@media only screen and (min-width: 1500px) {
    .hb-inline:not(.bp-null) .hdr-nav-desktop {
        display:block;
        height: 100%
    }

    .hb-inline:not(.bp-null) .hdr-menu-button {
        display: none
    }

    .hb-inline:not(.bp-null) .header-nav-drawer {
        display: none
    }
}

I tested in browser and it worked for me.

9

I’ll give that a shot. Do I need to add anything at the end of the base.css after I remove that or is that all I need to do?

10

No other changes.

I just removed that.

11

That worked!! Thank you!