Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Dropdown Menu colour Squarespace 7.1


Go to solution Solved by tuanphan,

Recommended Posts

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

screenshot-2019-07-29-at-114717.png.7a2855cc3564f2c638d024dd84c72db8.png

Edited by StephenWise1999
Initial Revision
Link to post
  • Replies 95
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

@StephenWise1999 Add to Home > Design > Custom CSS /* Change dropdown menu background */ .header-nav-folder-content { background: #febf00 !important; }

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

Add to Home > Design > Custom CSS .header-nav-folder-content { left: -1em !important; right: auto !important; text-align: left !important; }  

Posted Images

@StephenWise1999 Add to Home > Design > Custom CSS


/* Change dropdown menu background */
.header-nav-folder-content {
   background: #febf00 !important;
}


Link to post
  • 4 months later...
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?

Link to post

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

 

Link to post
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.

Link to post

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

Screen Shot 2019-12-11 at 9.53.53 AM.png

Link to post

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

Link to post

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

screen shot of how to change layout and text alinement.jpg

Link to post
  • 2 weeks later...
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;
}

 

Link to post
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;
}

 

Link to post
  • 1 month later...
  • 1 month later...
  • 2 weeks later...
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;
}
Link to post
  • 4 weeks later...

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

❤️

Link to post
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;
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...