Jump to content

Dropdown Menu colour Squarespace 7.1

Go to solution Solved by tuanphan,

Recommended Posts

On 6/21/2022 at 7:06 AM, tuanphan said:

What is your site url? We can check easier

 

On 6/23/2022 at 9:03 AM, tuanphan said:

Add to Design > Custom CSS

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    padding-top: 0;
    padding-bottom: 0;
}

 

Awesome, thanks!

Link to comment
  • 2 months later...

I changed the top nav menu on my blog page to have a custom background colour and font colour, but for some reason there's this white padding around the drop down folder. Is there a way to make this padding dark grey as well?

Here's my site: https://sapphire-grouse-xtsp.squarespace.com/

This is the code I've used:

body[class*="collection-type-blog"].view-item header#header {
    background-color: #636466 !important;
}

body[class*="collection-type-blog"] header#header a {
    color: #fff !important;
}

body[class*="collection-type-blog"] header#header div.header-nav-folder-content a {
    background-color: #636466
      !important;
}

body[class*="collection-type-blog"] header#header div.nav-folder a {
    background-color: #636466
      !important;
}

body[class*="collection-type-blog"] header#header div.header-nav-folder-content a {
      color: #ffffff !important;
}

Screen Shot 2022-09-04 at 10.18.47 PM.png

Link to comment
8 hours ago, z03 said:

I changed the top nav menu on my blog page to have a custom background colour and font colour, but for some reason there's this white padding around the drop down folder. Is there a way to make this padding dark grey as well?

Here's my site: https://sapphire-grouse-xtsp.squarespace.com/

This is the code I've used:

body[class*="collection-type-blog"].view-item header#header {
    background-color: #636466 !important;
}

body[class*="collection-type-blog"] header#header a {
    color: #fff !important;
}

body[class*="collection-type-blog"] header#header div.header-nav-folder-content a {
    background-color: #636466
      !important;
}

body[class*="collection-type-blog"] header#header div.nav-folder a {
    background-color: #636466
      !important;
}

body[class*="collection-type-blog"] header#header div.header-nav-folder-content a {
      color: #ffffff !important;
}

Screen Shot 2022-09-04 at 10.18.47 PM.png

It looks fine to me. Did you solve it?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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...
18 hours ago, emilypeacock said:

@tuanphan

By any chance would you know the code to be able to target specific drop down menus.

I have 2 drop down menus and I want them to be different colours.

Thankyou!

What is your site url? We can give code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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 hour ago, ClydeBeeno3 said:

How do you change the color of background and text on the mobile drop down menu? Picture example attached.

 

image.thumb.png.e42cdb4a691fc3d60142c07bfe40fb78.png

Add to Design > Custom CSS

.header-menu-bg.theme-bg--primary {
    background-color: #f1f !important;
}
div.header-menu-nav-item * {
    color: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
19 hours ago, ClydeBeeno3 said:

Thank you, this is super helpful. One more question - how can I change the color of the X and the Instagram logo in the drop down menu on the mobile website? I have put the snippet below.

 

image.thumb.png.571ad1fd8fa6106466241e187d6e4183.png

What is site url? We can check Instagram icon code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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...
On 1/2/2023 at 5:03 AM, MorganBrown42 said:

Having an issue where my navigation menu background color is still from the old orange theme the original creators chose, and I cannot seem to make it black for the life of me.

www.dystopiarisingnocal.com

Thanks!

image.png.61ece4f78dc56166512d6a2f5bb202e5.png

Your template needs a different class name

.horizontal-navigation-bar nav.main-nav .folder .subnav ul {
    background-color: #000 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
20 hours ago, veganscorpion said:

Any way to fix this so that the underline that shows up when you hover over the text underlines the text only, not the whole line?

Thanks in advance!

Custom CSS fix needed.png

What is your site url? Which code did you use?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 1/12/2023 at 5:45 PM, clare22 said:

Is there a way i cam customise the background colour for a dropdown menu on specific pages in one website.

ie: homepage i want blue background

About page, white background

Services page, grey

What is your site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

I'm trying to create a hover state where navigation menu options change to light blue on hover. The issue with the current code I tried is that it if I'm hovering on any option under the folder "Case Studies", it turns them all blue at once. Is there a way to just isolate the option in the dropdown menu so that only the option that is hovered over shows?  (Then "About" and "Say Hi" would also turn light blue when hovered?) Thank you! 

 

361845501_ScreenShot2023-01-30at9_43_32PM.png.780794f635ab2b70973f5e505d403f4d.png

 

Link to comment
On 1/31/2023 at 11:47 AM, stevr535 said:

I'm trying to create a hover state where navigation menu options change to light blue on hover. The issue with the current code I tried is that it if I'm hovering on any option under the folder "Case Studies", it turns them all blue at once. Is there a way to just isolate the option in the dropdown menu so that only the option that is hovered over shows?  (Then "About" and "Say Hi" would also turn light blue when hovered?) Thank you! 

 

361845501_ScreenShot2023-01-30at9_43_32PM.png.780794f635ab2b70973f5e505d403f4d.png

 

Hi,

What is site url? We can check problem easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
20 hours ago, tuanphan said:

Hi,

What is site url? We can check problem easier

Thank you! It's www.rachelstevensportfolio.com

To be more clear, I'm trying to figure out how to change the dropdown menu items to a darker blue on hover. 

I'm also wondering if it's possible to change the links in the footer to a lighter blue on hover?

Link to comment
On 2/2/2023 at 9:59 AM, stevr535 said:

Thank you! It's www.rachelstevensportfolio.com

To be more clear, I'm trying to figure out how to change the dropdown menu items to a darker blue on hover. 

I'm also wondering if it's possible to change the links in the footer to a lighter blue on hover?

Add to Design > Custom CSS

.header-nav-folder-item a:hover span {
    color: darkblue;
}
footer.sections a:hover {
    color: lightblue;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.