Dropdown Menu colour Squarespace 7.1

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!

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

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

It looks fine to me. Did you solve it?

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

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

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

1 hour ago, ClydeBeeno3 said:

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

 

Add to Design > Custom CSS

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

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.

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.

 

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

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!

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!

Your template needs a different class name

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

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!

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!

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

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

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

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! 

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! 

 

 

Hi,

What is site url? We can check problem easier

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?

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

7 hours ago, tuanphan said:

Add to Design > Custom CSS

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

 

Thank you so much! You're a life saver. 🙏

@tuanphan  I am having issues with having two background colors. I have messed with code and utilized code from this thread and it's doing what I want on one page, but I cannot get rid of the teal that is showing up on the dropdown of other pages. I have no idea why or how it is there and cannot seem to get rid of it. It doesn't seem to be tied to a theme because it stays no matter what theme I change to. Any ideas why/how to get rid of it?? Just to be clear, the screenshot with just a grey background is correct. The teal AND grey is not correct.

Site: https://mmec-architecture.squarespace.com/culture
PW: mmecarchitecture

On 5/26/2023 at 12:39 AM, pmterrell said:

@tuanphan  I am having issues with having two background colors. I have messed with code and utilized code from this thread and it's doing what I want on one page, but I cannot get rid of the teal that is showing up on the dropdown of other pages. I have no idea why or how it is there and cannot seem to get rid of it. It doesn't seem to be tied to a theme because it stays no matter what theme I change to. Any ideas why/how to get rid of it?? Just to be clear, the screenshot with just a grey background is correct. The teal AND grey is not correct.

Site: https://mmec-architecture.squarespace.com/culture
PW: mmecarchitecture

Change this code in CSS box

.header-nav-item--active a {
    background-image: linear-gradient(#19a09a,#19a09a) !important;
}

to this

.header-nav-item--active>a {
    background-image: linear-gradient(#19a09a,#19a09a) !important;
}

@tuanphan Yes! Thank you!!

Hello, I am now using your code for transparent drop-down menu which has worked beautifully thank you!

Just wondering if there is an add on to change the background colour for hover over the linked pages?

On 8/14/2023 at 9:10 AM, NaomiBrandDesigner said:

Hello, I am now using your code for transparent drop-down menu which has worked beautifully thank you!

Just wondering if there is an add on to change the background colour for hover over the linked pages?

You mean background color or whole Dropdown, or dropdown item or both nav item + dropdown item?