Re: Dropdown Menu Too Transparent (Again) Fashionopolism Theme

Solved

Dropdown Menu Too Transparent (Again) Fashionopolism Theme

naturalflow
Excursionist
21 0 7

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.

 

スクリーンショット 2024-11-15 153628.png

 

For referece, I am using the Fashionopolism theme.

https://j-beautynatural.com/

Password: nflow001

 

I would appreciate any and all help! Thank you.

Accepted Solution (1)

Liquid_xPert_SJ
Shopify Partner
1356 141 206

This is an accepted solution.

@naturalflow 

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

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

 

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 16 (16)

Liquid_xPert_SJ
Shopify Partner
1356 141 206

This is an accepted solution.

@naturalflow 

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

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

 

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
naturalflow
Excursionist
21 0 7

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

Liquid_xPert_SJ
Shopify Partner
1356 141 206

@naturalflowno problem anytime 🙂

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
naturalflow
Excursionist
21 0 7

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.

 

スクリーンショット 2024-12-17 111809.jpg

Liquid_xPert_SJ
Shopify Partner
1356 141 206

@naturalflow 

Yes it can be done share the store url.

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
naturalflow
Excursionist
21 0 7

Thank you for replying to quickly!

 

https://j-beautynatural.com/

Password: jbn001

Liquid_xPert_SJ
Shopify Partner
1356 141 206

@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;
}

 

2024-12-17 10_10_05-J-Beauty Natural — Mozilla Firefox.png

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
naturalflow
Excursionist
21 0 7

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?

Liquid_xPert_SJ
Shopify Partner
1356 141 206

@naturalflowwhere you have put that code? in theme.liquid file? before </body> tag?

its working as it should be.

 

2024-12-17 10_48_42-J-Beauty Natural — Mozilla Firefox.png

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
naturalflow
Excursionist
21 0 7

Yes! I but it on theme.liquid before the </body> tag.

Liquid_xPert_SJ
Shopify Partner
1356 141 206

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

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
naturalflow
Excursionist
21 0 7

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>

Liquid_xPert_SJ
Shopify Partner
1356 141 206

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

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.

swym
Trailblazer
172 36 77

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:

 Screenshot 2024-11-15 at 12.42.18 PM.png

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

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
naturalflow
Excursionist
21 0 7

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!

swym
Trailblazer
172 36 77

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

 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries