Help changing menu breakpoints

Solved
egement
Tourist
9 0 3

Hello I need my nav to enter hamburger style but in my themes documentation there is no explanation about the correct CSS and couldn't find it in inspector too.

my site link is: https://4k9ho5cfycfejwhs-28402876475.shopifypreview.com currently not published because of the menu design

Theme: Flow

Screenshot of normal menu:

Screenshot 2021-04-24 at 5.11.09 PM.png

I need Hamburger at this instance when 1 menu item moves under other items:

Screenshot 2021-04-24 at 5.05.33 PM.png

But it goes even further:

Screenshot 2021-04-24 at 5.05.46 PM.png

dmwwebartisan
Shopify Partner
5673 1294 1654

This is an accepted solution.

@egement 

Please add the following code at the bottom of your assets/theme-index.min.css file.

@media only screen and (min-width: 768px){
.site-header .site-header__wrapper {display: none !important;}
.header-section--wrapper .large--hide {display: block !important;}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
egement
Tourist
9 0 3

It is not the real solution to my problem but I changed min-width: 768 to max-width:1230 in my case of use now it is all good life saver

egement
Tourist
9 0 3

@dmwwebartisan 

 

now on hover this happens the background changes but it needs to stay black

Screenshot 2021-04-24 at 5.41.31 PM.png

0 Likes
dmwwebartisan
Shopify Partner
5673 1294 1654

@egement 

Please add the following code at the bottom of your assets/theme-index.min.css file.

@media only screen and (min-width: 768px){
.contact-page .header-section.sticky-header:not(.sticked) .overlay-header.force-hover, .contact-page .header-section.sticky-header:not(.sticked) .overlay-header:hover, .contact-page .header-section:not(.sticky-header) .overlay-header.force-hover, .contact-page .header-section:not(.sticky-header) .overlay-header:hover, .template-collection .header-section.sticky-header:not(.sticked) .overlay-header.force-hover, .template-collection .header-section.sticky-header:not(.sticked) .overlay-header:hover, .template-collection .header-section:not(.sticky-header) .overlay-header.force-hover, .template-collection .header-section:not(.sticky-header) .overlay-header:hover, .template-index .header-section.sticky-header:not(.sticked) .overlay-header.force-hover, .template-index .header-section.sticky-header:not(.sticked) .overlay-header:hover, .template-index .header-section:not(.sticky-header) .overlay-header.force-hover, .template-index .header-section:not(.sticky-header) .overlay-header:hover, .template-list-collections .header-section.sticky-header:not(.sticked) .overlay-header.force-hover, .template-list-collections .header-section.sticky-header:not(.sticked) .overlay-header:hover, .template-list-collections .header-section:not(.sticky-header) .overlay-header.force-hover, .template-list-collections .header-section:not(.sticky-header) .overlay-header:hover {
    background: black !important;
}
}
If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
egement
Tourist
9 0 3

@dmwwebartisan 

 

Hello it worked but overall both codes u gave me applied to only homepage but any other page is still the same like collections, single product, individual pages on the menu.hamburger is still not visible on them

 

0 Likes