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 comment
  • Solution

@StephenWise1999 Add to Home > Design > Custom CSS


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


Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...