Change dropdown menu background colour or opacity - Debut theme

Highlighted
Shopify Partner
2 0 0

Hi all, have been trying to change it to a white background on the top menu drop downs. I have read about 4 different tutorials, none of which apply to mine.

I have searched for dropdown options in the theme.scss.liquid file quite a bit last night and today, with nothing looking remotely similar to the other answers for this question I've come across. 

The website is www.edgeofnormality.com 

I just want the drop down for categories and follow us to not be overshadowed by the top banner and I don't want to get rid of that top banner. 

Can anyone help me please? 

Many thanks

0 Likes
Highlighted
Shopify Expert
2684 67 818

Hi Victoria,

your body background color is set to transparent (you've clicked the checkered square when choosing it), this is why your dropdowns are rendered with transparent background.

You can either change the body background, or, if it is done intentionally, add this code to the bottom of your theme.scss.liquid Asset:

.site-nav__dropdown {
    background:  white;
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
3 Likes
Highlighted
Shopify Partner
2 0 0

Thank you, thank you, thank you, THANK YOU. 

Changing the background colour worked, upvoted, have a nice day, you've made mine better. :) 

0 Likes
Highlighted
Excursionist
26 0 6

-- Edited--

Nevermind, found the fix

Thanks

--------------------------------------------------------------------

Please can you also provide the right code for supply theme?, this one didn't work

I just want to change the background color for the menu drop down

 

0 Likes
Highlighted
Shopify Expert
2684 67 818

Alia,

for Supply the proper rule is like this:

.site-nav--dropdown {
    background-color: red;
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
2 0 0

Hey Tim

 

Is it possible to do the opposite? i would like to chance the opacity on my sticky main-navigation?

0 Likes
Highlighted
Excursionist
22 0 0

find .site-nav__dropdown under your theme.scss.liquid

 and paste opacity: 0.4; into that element

like so:

 

.site-nav__dropdown {
  display: none;
  position: absolute;
  padding: 11px 30px 11px 0;
  margin: 0;
  z-index: $z-index-dropdown;
  text-align: left;
  border: 1px solid $color-border;
  background: $color-bg;
  left: -1px;
  top: 41px;
  opacity: 0.4;

 

0 Likes
Highlighted
New Member
1 0 0

Hi Shopify Expert,

Can you please help. I am trying to change the background colour of my dropdown menu to black so the white text can be seen on it. Please refer to screenshot below.

FYI I am not running a debut theme. 

Thanks 

Screen Shot 2020-08-01 at 15.24.27.png

0 Likes