Dropdown Menu Too Transparent (Again) Fashionopolism Theme

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.

https://j-beautynatural.com/

Password: nflow001

I would appreciate any and all help! Thank you.

@naturalflow

you can add the below css code to your theme.liquid file or wherever you added before.

.megamenu {
	background-color: #000 !important;
}
2 Likes

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:


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 ( :+1: ) 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

1 Like

Thank you so much! It worked perfectly. You are a life saver!

1 Like

@naturalflow no problem anytime :slightly_smiling_face:

1 Like

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!

1 Like

@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.

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.

1 Like

@naturalflow

Yes it can be done share the store url.

1 Like

Thank you for replying to quickly!

https://j-beautynatural.com/

Password: jbn001

1 Like

@naturalflow

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

1 Like

Thank you!

I tried putting in this code, but it didn’t come out the same way.

.megamenu .grid__wrapper.grid__wrapper-nest { background-color: #000 !important; grid-column: 4 / span 6 !important; }

Is this the wrong code?

@naturalflow where you have put that code? in theme.liquid file? before tag?

its working as it should be.

1 Like

Yes! I but it on theme.liquid before the tag.

1 Like

@naturalflow i dont see your code before tag in the page source code can you please put again and refresh and test it.

1 Like

Sorry for the confusion! I was able to get it to work!

I used the following code:

#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; }
1 Like

@naturalflow please mark as solution if you issue has been resolved :slightly_smiling_face:

1 Like