Dropdown Menu colour Squarespace 7.1

Hey, I'm building my site in 7.1 (mainly to get to grips with using it) and I've come across one problem I can't seem to fix.

The dropdown navigation has white text & a white background(image attached)

My header colour palette is yellow, whereas the main website has a white background, I'm wondering if this is part of the problem.

It'd be greatly appreciated if anyone can find any workaround for me.

Site is here: https://hexaflexagon-star-bh8p.squarespace.comPasword: 123123

That worked perfectly, I'd tried a variation of .header-nav but didn't manage to get it right. Thank you!

You're welcome. Have a nice week.

DeaTuznphan,

do you have a way to make the width of the drop down wider according to the width of the text?

Thanks,

G

53 minutes ago, gcart said:

DeaTuznphan,

do you have a way to make the width of the drop down wider according to the width of the text?

Thanks,

G

Yes. You can use custom code to increase dropdown width. Can you share link to your site, i can take a look?

@tuanphan

Thank you so much!!  I needed to edit the drop down folder links color to black and I used your code as guidance.

So I'm guessing that putting:  !important   tells Squarespace to notice it.

/* Change dropdown menu background & link color :) */
.header-nav-folder-content {
   background: #ffffff !important;
  color: #000000 !important;
  
  a {
  color: #000000 !important;
}
}

16 minutes ago, Supdude said:

@tuanphan

Thank you so much!!  I needed to edit the drop down folder links color to black and I used your code as guidance.

So I'm guessing that putting:  !important   tells Squarespace to notice it.

/* Change dropdown menu background & link color :) */
.header-nav-folder-content {
   background: #ffffff !important;
  color: #000000 !important;
  
  a {
  color: #000000 !important;
}
}

 

Have you solved yet?

An element can be affected by many CSS. Use important to give your CSS the highest priority.

Dear Tuanphan,

That is big help. But now all the text pushed to the right as on the attached screen shot.
I may be able to correct this in the design section but since I’m using CSS I’d like to do all that in the CSS.

And I’d like the dropdown menu to size according to the text. Now the text moves down when it hits the edge of the box.

I really appreciate your help.

Sincerely,
George Cartwright

@gcart

All the code above only affects color and background. Your problem, I think it came from another cause.

You can create a new question, and describe the problem in detail.

... I went ahead and found out how to change the text and make it all line up to the left.
Here’s a screen show of how I did it.
And I got a little transparency which I like.
Best,

George
 

Hi, 

Can someone share the code that they use to make the folder drop down transparent? 

Thanks. 

Hi,
Can someone help me with my site? I would like the drop down menus to be transparent. How can I do this please?

https://www.saddle-fit.co.uk

Thank you :)

12 hours ago, westernsaddler said:

Hi,
Can someone help me with my site? I would like the drop down menus to be transparent. How can I do this please?

https://www.saddle-fit.co.uk

Thank you :)

Add to Home > Design > Custom CSS

.folder .subnav {
    background: transparent !important;
}

3 hours ago, tuanphan said:

.folder .subnav { background: transparent !important; }

Thank you. I have put it into the CSS but nothing has changed on my website. Thank you very much 🙂

3 minutes ago, westernsaddler said:

Thank you. I have put it into the CSS but nothing has changed on my website. Thank you very much 🙂

try this

.folder .subnav li {
    background: red !important;
}

31 minutes ago, tuanphan said:

try this

.folder .subnav li {
    background: red !important;
}

 

Fixed! Thank you so much! I changed it to white as transparent didn't work. Thank you again!!

Hi there, any chance you could help me with the code to increase the width of the drop down menu for our site www.foreveryoungads.com ?

and solved 😂

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 300px;
}

On 12/27/2019 at 4:00 AM, tuanphan said:

Add to Home > Design > Custom CSS

.folder .subnav {
    background: transparent !important;
}

 

How do I make it semi-opaque?

Hi would you have a code for it to be with 50% opacity

Thanks

On 4/11/2020 at 3:00 AM, LondonSimon said:

Hi would you have a code for it to be with 50% opacity

Thanks

 

On 3/30/2020 at 2:37 AM, jeremiahmarsh said:

How do I make it semi-opaque?

.folder .subnav {
    background: rgba(0,0,0,0.5) !important;
}

Hi all,

I can't figure this out for the life of me! Im trying to get my nav to change to a different background color when selected - or at least change the color of the text when selected. I've tried the suggestions in this thread but i'm now back to the drawing board.

My site is www.thefavoriteco.com

❤️

1 minute ago, heller said:

Hi all,

I can't figure this out for the life of me! Im trying to get my nav to change to a different background color when selected - or at least change the color of the text when selected. I've tried the suggestions in this thread but i'm now back to the drawing board.

My site is www.thefavoriteco.com

❤️

Add to Home > Design > Custom CSS

/* desktop*/
.header-nav-item--active a {
    color: red !important;
}
/* mobile */
.header-menu-nav-item--active a {
    color: red !important;
}
/* folder */
.header-nav-folder-item--active a {
    color: red !important;
}

@tuanphan do you sleep? You're the most helpful human, ever! Thank you! Trying this now! ❤️