How to make the menu always in mobile mode?

[Manji]

I want to make the menu on my website in mobile mode with a hamburger style menu all the time even when viewed on a desktop. If you resize the browser window, you can see that the menu changes into a different style of menu. I was recommended to change settings in the store and inserting code within the theme.liquid but it didn’t work. I also want to continue using my theme and apps associated with the menu. Currently I use the Empire theme by Pixel Union and the Buddha Mega Menu & Navigation by Buddha Apps. I appreciate any help!

The link to the website is:

Aftermarket and Genuine Car Parts

The screenshot above is what I currently have and don’t want ^

The screenshot above is what I want for any resolution ^

[Ujjaval]

@Manji
put below css into theme.css file

@media screen and (min-width: 990px){
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {display: none !important;}
.header:not(.header--middle-left) .header__inline-menu { display: none !important;}
.header--top-center *>.header__search, .header:not(.header--top-center)>.header__search { display: inline-flex !important;}
header-drawer {display: block !important;}
}
@media screen and (max-width: 425px){
h2.banner__heading.h0 {
    display: none !important;
}
}

[Manji]

I put it in the theme.css.liquid file because the theme I have doesn’t have a theme.css file and it didn’t work. Also tried putting it in the theme.liquid file in between and it didn’t work either.

[BSS-Commerce]

Hi @Manji

Please follow these steps:

• To show the hamburger button all the time, please add the following code to the theme.css file:

.site-header-menu-toggle {
    opacity: 1;
    visibility: visible;
    transition: opacity 125ms cubic-bezier(0,0,.2,1) .1s;
    position: relative;
    top: 0;
    left: 0;
}

• To show the mobile navbar, you must intervene more deeply in your theme code. You can try the following:
  Go to Online Store > Theme > Edit Code, and add the following code to any file with the js in the assets folder:

setTimeout(() => {
    document.querySelector('#shopify-section-static-header .site-header-menu-toggle').addEventListener("click",() => {
        document.querySelector("#site-mobile-nav").style.visibility = 'visible';
    })
}, 1000);

I hope that it will work for you.

[Manji]

Unfortunately it didn’t work. What it did was add the hamburger menu but didn’t make the menu in mobile format.

When you click on the Hamburger menu it shows this