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

Dropdown Menu colour Squarespace 7.1

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

Share this post


Link to post

@StephenWise1999 Add to Home > Design > Custom CSS


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



You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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

 

Share this post


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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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

Share this post


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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post

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 ?

 

image.thumb.png.a241631c7c88e4f4ab79f74c5a9c0770.png

Share this post


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

Share this post


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

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


Link to post

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

❤️

Share this post


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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

OFF to next Tuesday. Please send to email if you have urgently problem.

Share this post


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