Submenu Alignment on third-party theme E-Commerce Theme

BKMerchant · ‎04-26-2024

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.

ThePrimeWeb · ‎04-28-2024

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.

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

ThePrimeWeb · ‎04-26-2024

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 · ‎04-27-2024

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 · ‎04-27-2024

This is what I see in mobile @BKMerchant,

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 · ‎04-27-2024

Please see the below attached

Image. thank you

ThePrimeWeb · ‎04-28-2024

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.

Was I helpful?