How to change padding of Mega Menu ?

LeahandRosemary
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

Replies 7 (7)

diego_ezfy
Shopify Partner
2935 562 883

Hello,


Send tee URL to your website please

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

LeahandRosemary
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

diego_ezfy
Shopify Partner
2935 562 883

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.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

LeahandRosemary
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

LeahandRosemary
Excursionist
31 0 5

hi @diego_ezfy 

 

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

Thanks!

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Djenepo3
Visitor
1 0 0

Hi,

 

I have the same issue as above, but the code didn't work even if I pasted it in the right file at the right place. May I ask if you might know why?

This is my shop: https://kabutobooks.com/

("Crave" free template was used to create the website.

I attached a screenshot of the wonky mega menu, for easier understanding.)wonky_menu.jpg

Thank you for the help in advance for anyone who might be able to figure this out.