Header on desktop to match that of mobile header

Solved
Highlighted
Tourist
17 0 0

Hi Shopify Community,

 

I'm David, and I help run a website in Mexico:

https://miriamjoyeria.com/

 

I would like to match the same header as we have on the mobile to our desktop header.  It changes when it reaches a certain pixel limit.

 

Screenshot is below of what I would like permanently for all desktop headers.  I like that three-lines thing on the upper-left side.  It just looks cleaner to me.

 

Hopefully one of you CSS-ninjas can help me with the custom coding.

 

Thanks for reading!

 

captira.png

 

0 Likes
Highlighted
Shopify Partner
1206 162 328

you can put this in the bottom of your style-main.scss.liquid in your assets folder:

.menu_moblie {
    display:flex!important
}

div#shopify-section-header {
    display: none;
}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted

Success.

Shopify Expert
1355 111 181

Hi @,
1. Go to Online Store->Theme->Edit code
2. Asset->engo-customize.scss.css->paste bellow code in bottom of file
header#header {
display: none !important;
}

.menu_moblie {
width: 100%;
display: inline-flex !important;
}

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Shopify Expert Page: https://experts.shopify.com/perennialsolution
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Explorer
142 2 10

Hello, 

In your CSS file, you have to add only two below property  CSS- 


1) Firstly hide the desktop header - display none - 

Code to write - 
#shopify-section-header
{
display: none;
}

2) Secondly, Show the Mobile menu by- 

Code to write - 

.menu_moblie
{
display:flex!important
}

 

This is the solution & also please like my answer & accept as a solution. 

Thank you

 

 

also, If you like my answer then please like & for helpful then please accept as a solution.

Best Regards,
Shopify Expert
Atique/99coders
Email: atique@99coders.co
Skype: info@99coders.co
0 Likes
Highlighted
Tourist
17 0 0

This worked.

Thank you all for your attention and help.  I love this community.

0 Likes
Highlighted
Shopify Expert
1355 111 181

Thanks for kind of words feel free to reach out.

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Shopify Expert Page: https://experts.shopify.com/perennialsolution
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes