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

ClemFandango
Tourist
4 0 0

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

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.  

 

 

 

0 Likes
suyash1
Shopify Partner
1987 202 303

@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

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
ClemFandango
Tourist
4 0 0

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

0 Likes
suyash1
Shopify Partner
1987 202 303
Hi Clem, I am checking it
you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
suyash1
Shopify Partner
1987 202 303

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

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
ClemFandango
Tourist
4 0 0

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

0 Likes
suyash1
Shopify Partner
1987 202 303
welcome and sorry to disappoint.
you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes