Solved

How to fix menu drop down length

iveysgarione
New Member
4 0 0

Hello, I would like to change the length of the dropdown menu box and fix the margin. I've tried a bunch of codes across the internet but none of them seem to work on the Zonex Theme. Here's how it looks right now:

 

iveysgarione_0-1711215852867.png

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1794 507 373

This is an accepted solution.

Hey @iveysgarione,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
ul.site-nav-dropdown {
    padding: 20px !important;
}

.simple-menu .site-nav-dropdown {
    width: max-content !important;
    left: unset !important;
    display: flex !important;
    flex-direction: column !important;
}

.site-nav-dropdown li {
    width: max-content !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711220622537.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
1794 507 373

Hey @iveysgarione,

 

Can you share the link to your store please?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
iveysgarione
New Member
4 0 0
ThePrimeWeb
Shopify Partner
1794 507 373

The store is password protected, can you share the password or disable it temporarily?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
iveysgarione
New Member
4 0 0

Sorry, it's 1234567

ThePrimeWeb
Shopify Partner
1794 507 373

This is an accepted solution.

Hey @iveysgarione,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
ul.site-nav-dropdown {
    padding: 20px !important;
}

.simple-menu .site-nav-dropdown {
    width: max-content !important;
    left: unset !important;
    display: flex !important;
    flex-direction: column !important;
}

.site-nav-dropdown li {
    width: max-content !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711220622537.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
iveysgarione
New Member
4 0 0

Thank you so so so so much! I just lost hours trying to find a way to fix it on my own.