Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello, I previously got help for this problem as can be found here.
https://community.shopify.com/c/technical-q-a/dropdown-menu-too-transparent/td-p/2744705
However, after adding more to my dropdown menu, the problem has once again occured. This time, the code I kindly received did not work as can be seen below.
For referece, I am using the Fashionopolism theme.
Password: nflow001
I would appreciate any and all help! Thank you.
Solved! Go to the solution
This is an accepted solution.
you can add the below css code to your theme.liquid file or wherever you added before.
.megamenu {
background-color: #000 !important;
}
This is an accepted solution.
you can add the below css code to your theme.liquid file or wherever you added before.
.megamenu {
background-color: #000 !important;
}
Thank you so much! It worked perfectly. You are a life saver!
@naturalflowno problem anytime 🙂
Hello, again!
Sorry to bother you, but do you know how to make it so that the text is aligned to the left? At the moment we feel that the two columns of text are spread too far apart from one another and would like to get them closer together.
Yes it can be done share the store url.
Add this CSS code to your css file where you added previously.
.megamenu .grid__wrapper.grid__wrapper-nest {
grid-column: 4 / span 6 !important;
}
Thanks
Thank you!
I tried putting in this code, but it didn't come out the same way.
<style>
.megamenu .grid__wrapper.grid__wrapper-nest {
background-color: #000 !important;
grid-column: 4 / span 6 !important;
}
</style>
Is this the wrong code?
@naturalflowwhere you have put that code? in theme.liquid file? before </body> tag?
its working as it should be.
Yes! I but it on theme.liquid before the </body> tag.
@naturalflow i dont see your code before </body> tag in the page source code can you please put again and refresh and test it.
Sorry for the confusion! I was able to get it to work!
I used the following code:
<style>
#nav .navigation__menuitem.navigation__menuitem--dropdown .megamenu {
background: #fff !important;
border-bottom: 1px solid #000;
}
.megamenu .grid__wrapper.grid__wrapper-nest {
grid-column: 4 / span 6 !important;
background-color: #fff !important;
}
</style>
@naturalflow please mark as solution if you issue has been resolved 🙂
Hey @naturalflow,
The code that was shared earlier is not working on the store anymore because the selectors on which you additional CSS are not present anymore.
To implement the background color again, please add the below code:
<style>
#nav .navigation__menuitem.navigation__menuitem--dropdown .megamenu {
background: #fff;
border-bottom: 1px solid #000;
}
</style>
Once done please save the changes and preview the results on the store to confirm whether the changes works for you or not. In reference to the above code changes, the updated menu items should look like:
I hope this helps!
If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.
Regards,
Abhishek from Swym
Thank you so much! This solution also worked!
I am sorry, I already accepted someone else's reply as a solution, but I hope anyone else having this problem knows that this method works too!
@naturalflow No problem.
@Liquid_xPert_SJ deserved that honor as he answered the question first. And I am really glad that our answers helped you in getting the desired results.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025