How To Only Show Mobile Header on all devices... Flex Theme

Store Design
1

Turns out OOTS Flex theme is not a flexy as what we thought. Am trying to create a centered header with menu bar on left (with a drawer menu) and cart on right but the ‘Centered Header’ setting has a top bar with the cart icon by default, and only allows mega menu dropdowns.

To overcome this, I am trying to only engage the mobile header (which has the look and functionality that we want) on all devices by tweaking the max width of the mobile header but i’m not having much luck.

Have already deleted the main header with this

.navbar {
display: none;

}

Am trying to play with the mobile header and changing the max widths ’ @_media only screen and (max-width: 798px)’ to engage on all screens but cant quite seem to find the right bit to change…

If anyone can help, would be much appreciated

https://demos.outofthesandbox.com/?theme=Flex&style=Techno

Clem x

Edit: Have tried to add a solution to CSS from another post on here Which ALMOST works. Had to change the class of the mobile header…

https://community.shopify.com/c/Shopify-Design/Header-on-desktop-to-match-that-of-mobile-header/td-p/658581

header#header {
display: none !important;
}

.mobile-header {
width: 100%;
display: flex !important;
}

But this has the icons and logos all pushed over to the left. and the Menu icon doesn’t open the menu drawer.

2

@ClemFandango - hello, what I understood is you want mobile menu to be active on desktop too, right?

can you please share your website link? the one you gave above is of demo store

3

Hey Suyash… I have managed to get the mobile header on to all screen sizes. But now my menu wont open when the screen is above 768px. Cart works fine. I have no idea what may be causing this. If you could point me in the right direction, that would be great

Clem

4

Hi Clem, I am checking it

5

@ClemFandango - Hi , I am also not getting it, I checked on desktop there is no jquery conflict too, what I believe is the javascript code written for opening mobile menu is set for mobile only, I recommend to ask theme support first, if they too can not help then we can add new code to force action on button click.

But it is better to ask them first, else we can try by forcing via code.

6

Ok i will reach out to them. Appreciate your help.

7

welcome and sorry to disappoint.

8

Did you get anywhere with this?

9

ended up getting it sorted by someone on Fiverr (for about $30)… OOTS wanted a ‘custom’ quote to get it done. Didn’t even venture down that path.

10

Hello all, I thought I’d add a solution here.

If you go to this file:
z__jsHeader.js

You will see this if statement on line 44 (or near)

if(!isScreenSizeLarge()) {
this.unload();
window.PXUTheme.mobileMenu.init();
}

Copy this window.PXUTheme.mobileMenu.init(); and move it outside of the if statement. This is the function that needs to run in order for the mobile menu animation to work on desktop. You will also have to amend the CSS to show the mobile menu and hide the desktop menu.