Dropdown Menu colour Squarespace 7.1

12 hours ago, Beyondspace said:

What is your site URL?

Here is the URL - its stil in build... hopefully you can see it if Logged-in to your SS account.

16 hours ago, MartinMurray said:

Here is the URL - its stil in build... hopefully you can see it if Logged-in to your SS account.

https://swan-oarfish-hpmr.squarespace.com/solutions
Password - Design01

 

Change this code

.header-nav-item--active a {
    background-image: linear-gradient(#5af5fa, #5af5fa) !important;
    padding-bottom: 5px !important;
}

to this

.header-nav-item--active>a {
    background-image: linear-gradient(#5af5fa, #5af5fa) !important;
    padding-bottom: 5px !important;
}

On 4/13/2024 at 7:19 AM, tuanphan said:

Change this code

.header-nav-item--active a {
    background-image: linear-gradient(#5af5fa, #5af5fa) !important;
    padding-bottom: 5px !important;
}

to this

.header-nav-item--active>a {
    background-image: linear-gradient(#5af5fa, #5af5fa) !important;
    padding-bottom: 5px !important;
}

 

@tuanphan This worked perfectly - Thanks Buddy 

Hello. I'm so new to this building a website thing and I'm driving myself nuts. My navigation dropdown background is the same color as the webpage which makes is unreadable as it opens. I would like to do a darker color when the drop down opens so it stands out and doesn't blend in. Also, is there a way to underline the category that is being looked at?

www.familythreadsco.com

Thank you so much!!

17 hours ago, familythreads said:

Hello. I'm so new to this building a website thing and I'm driving myself nuts. My navigation dropdown background is the same color as the webpage which makes is unreadable as it opens. I would like to do a darker color when the drop down opens so it stands out and doesn't blend in. Also, is there a way to underline the category that is being looked at?

www.familythreadsco.com

 

Thank you so much!!

You mean desktop dropdown menu or mobile dropdown? With desktop, you can use this to Website > Website Tools > Custom CSS. Replace with your desired color.

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

Thank you. I will try it shortly. Where can I find the color codes?

21 hours ago, familythreads said:

Thank you. I will try it shortly. Where can I find the color codes?

Which color you want to use? You can Google with keyword like this

Thank you!!

Hi, what about when you hover over a selection on the dropdown menu, is there a way to make the text bold, for example, when hovered over? so that the user knows which is being selected. Or a underline, or even change the text colour when hovered over.

Thanks

7 hours ago, Harrisandsonswindows said:

Hi, what about when you hover over a selection on the dropdown menu, is there a way to make the text bold, for example, when hovered over? so that the user knows which is being selected. Or a underline, or even change the text colour when hovered over.

Thanks

You can use this to Website Tools > Custom CSS

div.header-nav-folder-item a:hover span {
    border-bottom: 1px solid red;
}

Hi! Can someone please help me adjust my dropdown menu? I am new to 7.1, and have never used the Custom CSS feature. Currently the dropdowns are white background, navy text, and the links are very close together with no hover effect (current screenshot attached). I would like the background to be navy blue (#004E96) white text, and a hover effect with lighter background (#1189D8). Also would like to adjust the padding so there is more vertical space between each link (example attached). This is for the desktop version, the mobile version works fine as is. 

My site is still in build https://oleander-sunflower-y6fg.squarespace.com/  
password: ARCH01

Thanks so much! 

11 hours ago, jel206 said:

Hi! Can someone please help me adjust my dropdown menu? I am new to 7.1, and have never used the Custom CSS feature. Currently the dropdowns are white background, navy text, and the links are very close together with no hover effect (current screenshot attached). I would like the background to be navy blue (#004E96) white text, and a hover effect with lighter background (#1189D8). Also would like to adjust the padding so there is more vertical space between each link (example attached). This is for the desktop version, the mobile version works fine as is. 

My site is still in build https://oleander-sunflower-y6fg.squarespace.com/  
password: ARCH01

Thanks so much! 

 

You can use this to Website Tools > Custom CSS

div.header-nav-folder-content {
    background-color: #004E96 !important;
    padding: 0px !important;
}

div.header-nav-folder-content * {
    color: white !important;
}
.header-nav-folder-item {
    padding: 5px 1em !important;
}
.header-nav-folder-item:hover {
    background-color: #1189D8 !important;
}

That worked perfect! Thank you so much!!