Dropdown Menu colour Squarespace 7.1

On 5/5/2020 at 9:05 AM, tuanphan said:

Add to HOME> DESIGN> CUSTOM CSS

How do I get the color when hovering the dropdown menu to touch side-to-side? 

I am looking for code to change the background color of the navigation title when you hover over it. In the example attached, Id' like the background behind the word "Programs" to be the same cream color as the dropdown.

If this isn't possible, is thre at least code to change the text color to the cream color upon hover?

Thanks in advance!

14 hours ago, Benken2 said:

I am looking for code to change the background color of the navigation title when you hover over it. In the example attached, Id' like the background behind the word "Programs" to be the same cream color as the dropdown.

If this isn't possible, is thre at least code to change the text color to the cream color upon hover?

Thanks in advance!

Add to Website > Website Tools > Custom CSS

div.header-nav-item:nth-child(2)>a:hover {
	background-color: #c3bdae !important;
}

On 8/26/2023 at 2:11 AM, tuanphan said:

Add to Website > Website Tools > Custom CSS

div.header-nav-item:nth-child(2)>a:hover {
	background-color: #c3bdae !important;
}

 

Thank you! What code would I use to put an outline around the dropdown box?

13 hours ago, Benken2 said:

Thank you! What code would I use to put an outline around the dropdown box?

Use this

div.header-nav-item:nth-child(2)>a:hover {
	background-color: #c3bdae !important;
}
.header-nav-folder-content {
	border: 2px solid #f1f !important;
}

Hi. For the website:

https://fennel-swan-fakr.squarespace.com/

pw: VestedBeyond@)@##

Could you help with the following:

1) Make the font size smaller on my drop down menu items: 0.9em on desktop and 0.8 on mobile

2) On mobile overlay menu, make the button "Schedule a consultation" show before the LinkedIn icon, without changing the desktop navigation order.

Thank you!

11 hours ago, ozi said:

Hi. For the website:

https://fennel-swan-fakr.squarespace.com/

pw: VestedBeyond@)@##

Could you help with the following:

1) Make the font size smaller on my drop down menu items: 0.9em on desktop and 0.8 on mobile

2) On mobile overlay menu, make the button "Schedule a consultation" show before the LinkedIn icon, without changing the desktop navigation order.

Thank you!

#1. Add to Website > Website Tools (under Not Linked) > Custom CSS

div.header-nav-folder-content * {
    font-size: 0.9em !important;
}
[data-folder] div.container.header-menu-nav-item * {
    font-size: 0.8em !important;
}

#2. I don't see button + icon. Can you check it again?

12 hours ago, tuanphan said:

#1. Add to Website > Website Tools (under Not Linked) > Custom CSS

div.header-nav-folder-content * {
    font-size: 0.9em !important;
}
[data-folder] div.container.header-menu-nav-item * {
    font-size: 0.8em !important;
}

#2. I don't see button + icon. Can you check it again?

Thank you! Here are screengrabs of the button + icon on mobile and desktop highlighted with magenta (see attached)

On 11/7/2023 at 11:39 PM, ozi said:

Thank you! Here are screengrabs of the button + icon on mobile and desktop highlighted with magenta (see attached)

 

You can use this CSS code

/* Button before icon */
.header-menu-cta {
    order: 2 !important;
}
.header-menu-actions.social-accounts {
    order: 3 !important;
}

On 7/29/2019 at 7:59 AM, tuanphan said:

@StephenWise1999 Add to Home > Design > Custom CSS

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

 

 

Hello! I used this code to change the color of my dropdown menus. However, I would like each dropdown to be different colors. I've added solid boxes with different color backgrounds around each nav folder/link and want those colors to be the same for the dropdown menu. I added "nth-child(1)" and "nth-child(2) to target each dropdown menu that I'm trying to change, but the color applies to all of my dropdown menus, not the one I'm trying to target. My site is https://shallot-octagon-t35z.squarespace.com/ and the pw is: GreaterFalls

Here is the code I'm using:

div.header-nav-folder-content:nth-child(1) {
   background: #0154a2 !important;
}

div.header-nav-folder-content:nth-child(2) {
   background: #ed1e2e !important;
}

@tuanphan can you help me figure this out? Thank you in advance.

10 hours ago, jackweinstein said:

Hello! I used this code to change the color of my dropdown menus. However, I would like each dropdown to be different colors. I've added solid boxes with different color backgrounds around each nav folder/link and want those colors to be the same for the dropdown menu. I added "nth-child(1)" and "nth-child(2) to target each dropdown menu that I'm trying to change, but the color applies to all of my dropdown menus, not the one I'm trying to target. My site is https://shallot-octagon-t35z.squarespace.com/ and the pw is: GreaterFalls

Here is the code I'm using:

div.header-nav-folder-content:nth-child(1) {
   background: #0154a2 !important;
}

div.header-nav-folder-content:nth-child(2) {
   background: #ed1e2e !important;
}

@tuanphan can you help me figure this out? Thank you in advance.

Use this code

div.header-nav-item:nth-child(1) div.header-nav-folder-content {
    background: #0154a2 !important
}

div.header-nav-item:nth-child(2) div.header-nav-folder-content {
    background: #ed1e2e !important
}

Hi there, I'm having trouble making my dropdown menu in my overhead menu bar change to anything other than white. Can anyone help with making it transparent?

site is www.mikemonaghan.photography

Thank you for any help!!

2 hours ago, mikesmonsters said:

Hi there, I'm having trouble making my dropdown menu in my overhead menu bar change to anything other than white. Can anyone help with making it transparent?

site is www.mikemonaghan.photography

Thank you for any help!!

Use this CSS code

div.header-nav-folder-content {
    background-color: #f1f !important;
}

On 12/12/2023 at 8:53 PM, tuanphan said:

Use this code

div.header-nav-item:nth-child(1) div.header-nav-folder-content {
    background: #0154a2 !important
}

div.header-nav-item:nth-child(2) div.header-nav-folder-content {
    background: #ed1e2e !important
}

@tuanphan i hadn't seen that you'd responded to this. Worked perfectly! Thank you!

12 hours ago, tuanphan said:

Use this CSS code

div.header-nav-folder-content {
    background-color: #f1f !important;
}

Thank you so much for the help! Does this purple/pink dropdown menu mean that it has a color set somewhere else and I have to adjust that to make it transparent? I appreciate the quick response!!

10 hours ago, mikesmonsters said:

Thank you so much for the help! Does this purple/pink dropdown menu mean that it has a color set somewhere else and I have to adjust that to make it transparent? I appreciate the quick response!!

If you need to make it transparent

just change

#f1f

to

transparent

AMAZING! So simple. Thank you so much for the help.

Hi, I'm looking for some code to change the background colour of a drop down menu but only on a particular page.

My main site has a yellow background with black font, but one page has a dark background with white font, and so the custom CSS I input to make the dropdown box white doesn't work on this page as the font becomes invisible.

I want to change the background colour of this dropdown menu. The page is www.lastslice.com.au/events

20 hours ago, Hayls23 said:

Hi, I'm looking for some code to change the background colour of a drop down menu but only on a particular page.

My main site has a yellow background with black font, but one page has a dark background with white font, and so the custom CSS I input to make the dropdown box white doesn't work on this page as the font becomes invisible.

I want to change the background colour of this dropdown menu. The page is www.lastslice.com.au/events

You can use this CSS code

body#collection-63abfe094053d730cdebc53b .header-nav-folder-content {
    background-color: yellow !important;
}

Thank you for this great post. 

I am still having drop down menu styling issues. I may have missed in this post.

My home page navigation works fine and hovers using the correct color. The home page is inverse so navigation is white with the correct hover color.

Once I click on the dropdown menu (portfolios), the menu items are all the active color, which is also the hover color. An underline indicates which page is active, which makes it understandable. I would like the dropdown menu to be the default menu color, with the active color being the only different color. 

When selecting any other high level menu item (about) and then hovering over (portfolios), the menu is the default color as expected. The colors only change once you click on the submenu.

It works well enough but seems sloppy. 

my site: www.dianedhemingway.com

6 hours ago, dianedhemingway said:

Thank you for this great post. 

 

I am still having drop down menu styling issues. I may have missed in this post.

My home page navigation works fine and hovers using the correct color. The home page is inverse so navigation is white with the correct hover color.

Once I click on the dropdown menu (portfolios), the menu items are all the active color, which is also the hover color. An underline indicates which page is active, which makes it understandable. I would like the dropdown menu to be the default menu color, with the active color being the only different color. 

When selecting any other high level menu item (about) and then hovering over (portfolios), the menu is the default color as expected. The colors only change once you click on the submenu.

It works well enough but seems sloppy. 

my site: www.dianedhemingway.com

 

Change this code from CSS box

.header-nav-item--active a {
    color: #79c0a2 !important;
    background-image: none !important;
}

to this

.header-nav-item--active>a, .header-nav-folder-item.header-nav-folder-item--active a {
    color: #79c0a2 !important;
    background-image: none !important;
}

Hello - can someone help me with changing the color of the background for my drop down menu? I have pink font but the drop down shows up with a white background; I'd like to have it a lighter pink to distinguish it from the main page which is white. My site is www.bikerchiccupcakes.com Thanks so much!!

8 hours ago, KristinK said:

Hello - can someone help me with changing the color of the background for my drop down menu? I have pink font but the drop down shows up with a white background; I'd like to have it a lighter pink to distinguish it from the main page which is white. My site is www.bikerchiccupcakes.com Thanks so much!!

You can use this code to Website > Website Tools > Custom CSS

div.header-nav-folder-content {
    background-color: rgba(254, 104, 179,0.9) !important;
}

div.header-nav-folder-content * {
    color: white !important;
}

Any ideas on how to get rid of the cyan background on these links in the dropdown?... I have some custom CSS for the active link (1px cyan underline)... but it's also influencing the links within the drop-down.

6 hours ago, MartinMurray said:

Any ideas on how to get rid of the cyan background on these links in the dropdown?... I have some custom CSS for the active link (1px cyan underline)... but it's also influencing the links within the drop-down.

What is your site URL?