Solved

Submenu Alignment on third-party theme E-Commerce Theme

BKMerchant
New Member
4 0 0

I hope this message finds you well. I am reaching out to seek assistance with an issue I've been encountering regarding the alignment of the submenu with the parent menu on my website.

For reference, I have attached a file illustrating the problem. Despite my efforts over the past three days, I have been unable to resolve this issue. I have also contacted the Shopify helpdesk team, but unfortunately, they have been unable to assist due to the involvement of a third-party theme.

I would greatly appreciate any guidance or support you could provide in resolving this matter. Your expertise and assistance would be invaluable in ensuring a seamless user experience on my website.

Thank you very much for your attention to this matter. I look forward to hearing from you soon.

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2057 594 466

This is an accepted solution.

Hey @BKMerchant,

 

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>
@media only screen and (min-width: 990px) {
    a.dropdown-item {
        width: fit-content !important;
    }
    
    ul.dropdown-menu, ul.dropdown-menu li, ul.dropdown-menu li a, ul.dropdown-menu ul, ul.dropdown-menu ul li, ul.dropdown-menu li {
        width: fit-content !important;
        min-width: fit-content !important;
        max-width: unset !important;
        flex: none !important;
        left: unset !important;
    }
}
</style>

 

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

ThePrimeWeb_0-1714287270308.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2057 594 466

Hey @BKMerchant,

 

I don't see any attached files, but can you share the link to your store and tell me where the issue is and what you would like done to it?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
BKMerchant
New Member
4 0 0

Hello ThePrimeWeb, I appreciate your response. I'm having trouble with a file not showing up, but I've included a link for you to take a look at: https://bkmerchant.shop/. When you open it on desktop and click on any main menu, all the submenus appear on the top right, under the logo. However, this isn't happening on mobile, only on desktop. Could you please advise me on how to fix this issue? Thank you.

ThePrimeWeb
Shopify Partner
2057 594 466

This is what I see in mobile @BKMerchant,

 

ThePrimeWeb_0-1714211501037.png

 

Obviously the mobile menu is different from the desktop one because the mobile doesn't have enough space for the menu to look like the desktop version. So they function different. But the links appear as they should.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
BKMerchant
New Member
4 0 0

Please see the below attached

Menu Screenshot.JPG

Image. thank you

ThePrimeWeb
Shopify Partner
2057 594 466

This is an accepted solution.

Hey @BKMerchant,

 

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>
@media only screen and (min-width: 990px) {
    a.dropdown-item {
        width: fit-content !important;
    }
    
    ul.dropdown-menu, ul.dropdown-menu li, ul.dropdown-menu li a, ul.dropdown-menu ul, ul.dropdown-menu ul li, ul.dropdown-menu li {
        width: fit-content !important;
        min-width: fit-content !important;
        max-width: unset !important;
        flex: none !important;
        left: unset !important;
    }
}
</style>

 

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

ThePrimeWeb_0-1714287270308.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
BKMerchant
New Member
4 0 0

Thank you so much it worked out perfectly 🙂