Change background color in dropdown in Venture theme

Solved
Highlighted
Tourist
6 0 1

Hi,

How is it possible to change the background color in the dropdown-menu in theme Venture?
I found out how to replace the background on the sides of the dropdown in the theme.scss at row 3384

.meganav {
display: block;
visibility: hidden;
right: 0;
background-color: $color-content; (I changed this to yellow as in attached printscreen)


But I cant find any way to change the background in the products which pop-ups in the dropdown (please see attached printscrren).

Thanks in advance!


Skärmklipp.PNG

 

0 Likes
Highlighted
Shopify Partner
3182 701 847

@entranced 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
6 0 1

Hi,

www.wixter.se 

password: access1234

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1400 138 381

This is an accepted solution.

Hey there, @entranced 

 

Bo here from Shopify Support! 

 

That is a really great question, I was able to look into this for you and figured it out. Now, I noticed that you mentioned you edited a specific line of your theme.scss. When editing the CSS of your theme.scss we recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code added to the bottom will overwrite the previous code. So, in future, find the code you want to edit, copy the code and paste it at the very bottom of the file and then make your edits. This way if there are any issues caused by the code edit it is very easy to remove as opposed to trying to remember what to change it back to exactly. When editing the code of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. 

 

Steps: 

1. Go to Online Store > Themes > Actions > Edit Code.

2. Open the theme.scss.liquid file and scroll to the bottom of it. 

3. Paste the following code at the bottom of the file:

 

.meganav__product {
  .product-card {
    border-bottom-width: 0;
    background: yellow;
  }
}
.meganav__product {
  .product-card__info {
    background: yellow;
  }
}

 

 

You can of course use the hex code for whatever shade of yellow you would like as opposed to just the standard yellow in this example. Instead of writing the name of the color that you would like the background to be, you can input the hex code of the color found in this hex color picker online.

 

4. Click Save

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Tourist
6 0 1

Thank you for your input, Bo. That did the trick!