Solved

Mega Menu Display Issue over mobile - Flex theme

Aimee50
Excursionist
22 0 1

Hi there,

 

I'm having issues with how my mega menu displays over mobile. Screenshots below of desktop and mobile menus below for reference.

 

Screenshot 2022-09-08 at 16.15.19.pngScreenshot 2022-09-08 at 16.15.38.png

 

I would like the mobile menu to display items in a single line, using the same typefaces as desktop and obviously without the overlap.

I've added the below CSS to get the desktop version to display as I would like and have tried using @media screen and (min-width: 800px) and variations of this to target desktop and/or mobile only but seem don't seem to be able to make media queries work (I'm aware that I may be doing this incorrectly however).

 

.menu__heading{
text-transform: uppercase;
font-size: 1.5em;
letter-spacing: 1px;}

.mega-menu__linklist-link {
font-family: Montserrat;
color: #1C1C1C !important;}

.mega-menu {
border: 1.5px solid #1C1C1C;
padding-left: 4em;
padding-right: 4em;
}

.mega-menu__section mega-menu__mega-menu-1 {
padding-left: 10em;
padding-right: 10em;}

.menu__lists {
font-size: small;
}

.column.mega-menu__block.block__9ec0b187-4a7a-4d48-8daf-1be8420f3f9a.block__menu.one-fourth.medium-down--one-half
{
width: 30%;
margin-top: 5.5em !important;}

.column.mega-menu__block.block__8b0e5ce2-6931-4d98-9824-8934085113fa.block__menu.one-fourth.medium-down--one-half
{
width: 15%;
padding-left: 3em;
margin-top: 5.5em !important;
}

 

Thanks in advanve

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12292 2548 3698

This is an accepted solution.

@Aimee50 

Please add the following CSS to your assets/styles.css bottom of the file.

@media screen and (max-width: 749px){
.mega-menu .mega-menu__linklist-link {padding: 0.5em 0.5em !important;}
.mega-menu__mega-menu-1 .column.mega-menu__block.block__9ec0b187-4a7a-4d48-8daf-1be8420f3f9a.block__menu.one-fourth.medium-down--one-half { width: 54% !important;}
.mega-menu__mega-menu-1 .column.mega-menu__block.block__8b0e5ce2-6931-4d98-9824-8934085113fa.block__menu.one-fourth.medium-down--one-half {width: 30% !important; padding-left: 2em !important;}
.mega-menu__mega-menu-1 .mega-menu {padding-left: 0em !important;padding-right: 0em !important;}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 5 (5)

dmwwebartisan
Shopify Partner
12292 2548 3698

@Aimee50 

My pleasure to help you.
Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Aimee50
Excursionist
22 0 1

Thanks so much, it's https://hello-ea9a.myshopify.com/

dmwwebartisan
Shopify Partner
12292 2548 3698

This is an accepted solution.

@Aimee50 

Please add the following CSS to your assets/styles.css bottom of the file.

@media screen and (max-width: 749px){
.mega-menu .mega-menu__linklist-link {padding: 0.5em 0.5em !important;}
.mega-menu__mega-menu-1 .column.mega-menu__block.block__9ec0b187-4a7a-4d48-8daf-1be8420f3f9a.block__menu.one-fourth.medium-down--one-half { width: 54% !important;}
.mega-menu__mega-menu-1 .column.mega-menu__block.block__8b0e5ce2-6931-4d98-9824-8934085113fa.block__menu.one-fourth.medium-down--one-half {width: 30% !important; padding-left: 2em !important;}
.mega-menu__mega-menu-1 .mega-menu {padding-left: 0em !important;padding-right: 0em !important;}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Aimee50
Excursionist
22 0 1

Thank you so much, this worked 🙂

swapnilgupta
Visitor
3 0 0

Hi @dmwwebartisan 

 

My website URL : www.babyworksbyswapnil.com

 

Can you PLEASE PLEASE help me achieve the same thing ?

 

I want my website's mobile version to have Header menu like desktop version ( IN ONE SINGLE ROW instead of Hamburger View )

 

I would really be obliged if you could help me!

 

Thanks in advanceMobile-version.jpegDesktop-version.PNG