How to change padding of Mega Menu ?

Highlighted
Excursionist
31 0 5

Hello everyone,

 

I have a quick question. How do i change the padding in my theme so that the drop down menus for my mega menu (see below) are all on the same line and there is not so much spacing in between each collection?

 

Thank you!!

 

Screen Shot 2020-08-04 at 5.20.18 PM.png

0 Likes
Highlighted
Astronaut
1085 177 213

Hello,


Send tee URL to your website please

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Excursionist
31 0 5

Hi @diego_ezfy 

 

Thank you for taking a look -

 

https://mgox1qq3d84lh3id-41120923809.shopifypreview.com

 

I was able to get all of the items on one single line but now i am still struggling with reducing the space between each collection sub menu? Any help would mean the world!

 

(PS - do you know how to get a solid line to appear under each collection submenu so it does not blend it with the categories of each collection? (dresses,tops,bottoms,outerwear etc)?

 

Screen Shot 2020-08-04 at 9.35.57 PM.png

0 Likes
Highlighted
Astronaut
1085 177 213

Hey,

Try this:

1. In your Shopify Admin go to online store > themes > actions > edit code
admin-page.png

2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>


@media only screen and (min-width: 769px){
    .site-nav__dropdown .grid{
 display: flex;
 align-items: flex-start !important;
 justify-content: center !important;   
}

.site-nav__dropdown .grid .grid__item{
    width: 12.66667% !important;
}
}

</style>

 
Let me know whether it works.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Excursionist
31 0 5

@diego_ezfy 

 

Thank you that worked great. Do you know how to get "rompers & jumpsuits" to be on one line like the rest of the main collection titles? It would look cleaner if it wasn't two separate lines.

Also, is there a way to get a solid line to appear on the the main collection name when i hover over clothing? (Dresses, R&J, Outerwear, Tops, Bottoms, Curvy)? It blends in with the sub categories under them and i would like to make it more clear to the customer by having a solid line appear under the first word.

Please see here - 

 

Screen Shot 2020-08-05 at 8.28.09 AM.png

0 Likes
Highlighted
Excursionist
31 0 5

hi @diego_ezfy 

 

Wanted to follow up and see if you knew what is wrong. 

Thanks!

0 Likes
Highlighted
Astronaut
1085 177 213

Hey,

I reckon that the best solution for this is not code related, and yes UX related.

Altering the looks to fit a single overly sized text wouldn't be aesthetically pleasing. The code solutions would be:

1. make the text smaller
2. add ellipsis for the overly sized text (subsequently harming the full comprehension of the title)
3. increase the height of all titles

However the best one in my opinion and also my suggestion is to change the title to just "jumpsuits" or "rompers".

From an UX perspective it would work much better since the title is merely an indicative of what the user is about to see and, right below it, there is the option "all rompers and jumpsuits". It also ends up being less redundant.

Of course you'd need to A/B test it but I have a feeling it's the best to do.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes