Mega Menu Display Issue over mobile - Flex theme

[Aimee50]

Hi there,

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

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

[dmwwebartisan]

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

[Aimee50]

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

[dmwwebartisan · 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!

[Aimee50]

Thank you so much, this worked 🙂

[swapnilgupta]

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 advance