Shopify themes, liquid, logos, and UX
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!!
Hello,
Send tee URL to your website please
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)?
Hey,
Try this:
1. In your Shopify Admin go to online store > themes > actions > edit code
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.
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 -
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
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.)
Thank you for the help in advance for anyone who might be able to figure this out.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024