Dropdown Menu colour Squarespace 7.1

15 hours ago, F-RAVN said:

Hi! Is there any solution to increasing the leading space between the different dropdown options? And possible add a hover colour?

Thank you!

Hi,

Can you share link to your site? Each template will need a different code

@tuanphan thank you so much, it worked perfectly!

On 7/29/2019 at 9:59 PM, tuanphan said:

@StephenWise1999 Add to Home > Design > Custom CSS

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

 

 

@tuanphanyou are literally the best! I have used so many of your CSS snippets. A million thank yous!

Hello everyone and hello @tuanphan

I'm looking for every item on my dropdown menu to be a different color. I have a screenshot of my dropdown menu where all text links are pink but I would like each text link to be a different color (the gold text to be gold, the white to be white, etc...).

Here is code that is already on my site if that is helpful.

// Slanted Linked Elements //

.header-nav a:hover {
transform: skewX(20deg) !important;
}

.header-title-logo:hover, .header-title a:hover {
transform: skewX(20deg) !important;
}

.header-actions-action--cta:hover {
transform: skewX(20deg) !important;
}

.icon:hover, .sqs-svg-icon--wrapper svg:hover {
transform: skewX(20deg) !important;
}

.sqs-block-button-element:hover, .image-button a:hover {
transform: skewX(20deg) !important;
}

// Markdown Block Style + Icon //

.sqs-block-markdown .sqs-block-content {
  border: 2px solid #374ac8;
  background: transparent;
  padding: 10% !important;
}

// Contact and Newsletter Form Style //

form {
  border: 2px solid #3baabd;
  background: #fff;
  padding: 10% !important;
}

// Mini Announcement Bar //

.sqs-announcement-bar  {
  padding: 15px;
  margin: 0px;
  bottom: 0px;
  width: auto !important;
  position: fixed;
  top: initial !important;
}

.sqs-announcement-bar-hidden {
  display: none !important;
}
#item-61996c65f4827c151be43822 .blog-item-wrapper .blog-item-title h1.entry-title {
  color: #FFD700 !important;
}

On 12/18/2021 at 4:01 AM, TCVSquarespace said:

Hello everyone and hello @tuanphan

I'm looking for every item on my dropdown menu to be a different color. I have a screenshot of my dropdown menu where all text links are pink but I would like each text link to be a different color (the gold text to be gold, the white to be white, etc...).

 

Here is code that is already on my site if that is helpful.

 

// Slanted Linked Elements //

.header-nav a:hover {
transform: skewX(20deg) !important;
}

.header-title-logo:hover, .header-title a:hover {
transform: skewX(20deg) !important;
}

.header-actions-action--cta:hover {
transform: skewX(20deg) !important;
}

.icon:hover, .sqs-svg-icon--wrapper svg:hover {
transform: skewX(20deg) !important;
}

.sqs-block-button-element:hover, .image-button a:hover {
transform: skewX(20deg) !important;
}

// Markdown Block Style + Icon //

.sqs-block-markdown .sqs-block-content {
  border: 2px solid #374ac8;
  background: transparent;
  padding: 10% !important;
}

// Contact and Newsletter Form Style //

form {
  border: 2px solid #3baabd;
  background: #fff;
  padding: 10% !important;
}

// Mini Announcement Bar //

.sqs-announcement-bar  {
  padding: 15px;
  margin: 0px;
  bottom: 0px;
  width: auto !important;
  position: fixed;
  top: initial !important;
}

.sqs-announcement-bar-hidden {
  display: none !important;
}
#item-61996c65f4827c151be43822 .blog-item-wrapper .blog-item-title h1.entry-title {
  color: #FFD700 !important;
}

Can you share link to your site? Each case will need a different code

On 12/18/2021 at 9:28 PM, tuanphan said:

Can you share link to your site? Each case will need a different code

@tuanphan Here it is: http://www.welcometothecolorverse.com - Password: Sunny123 - I also was wondering if each link in my navigation could be a different color as well.

Thanks in advance for your help.

Hey all, I would like to make the background of my pull down sub-menu 50% opaque. I cannot manage to find it in the chat, or cannot make it work. I am using 7.1. :)) thank you! 

On 12/30/2021 at 9:23 PM, TCVSquarespace said:

@tuanphan Here it is: http://www.welcometothecolorverse.com - Password: Sunny123 - I also was wondering if each link in my navigation could be a different color as well.

Thanks in advance for your help.

Add to Design > Custom CSS. Do similar for other items

.header-nav-item:nth-child(1) a {
    color: blue !important;
}
.header-nav-item:nth-child(2) a {
    color: red !important;
}
.header-nav-item:nth-child(3) a {
    color: yellow !important;
}

On 12/31/2021 at 1:02 AM, Emmaol said:

Hey all, I would like to make the background of my pull down sub-menu 50% opaque. I cannot manage to find it in the chat, or cannot make it work. I am using 7.1. :)) thank you! 

Try adding this to Design > Custom CSS

.header-nav-folder-content {
	background-color: rgba(0,0,0,0.5) !important;
}

If it doesn't work, please share link to your site, we can check easier

13 hours ago, tuanphan said:

Add to Design > Custom CSS. Do similar for other items

.header-nav-item:nth-child(1) a {
    color: blue !important;
}
.header-nav-item:nth-child(2) a {
    color: red !important;
}
.header-nav-item:nth-child(3) a {
    color: yellow !important;
}

 

Thanks so much @tuanphan this worked for the navigation. Much appreciated and happy new year. How would I go about changing the color of the links that you see when you hover over the main navigation? For instance my main navigation link "look" has 12 different sub navigation links. How would I change the colors to those?

On 1/1/2022 at 11:13 AM, TCVSquarespace said:

Thanks so much @tuanphan this worked for the navigation. Much appreciated and happy new year. How would I go about changing the color of the links that you see when you hover over the main navigation? For instance my main navigation link "look" has 12 different sub navigation links. How would I change the colors to those?

Hello again @tuanphan - I was able to figure out how to do this. Thanks again for your help. 🙂

This chain has been so helpful. Anyone what code to add to make the dropdown background in nav smaller. 

This one made it wider

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 300px;
}

But when I changes the 300 to a smaller number it didn't respond. 

Awards and Films are the nav in question. Thanks to anyone that can help.

https://carillon-broccoli-7tgf.squarespace.com/

password :password!!!333

On 1/3/2022 at 12:09 PM, TCVSquarespace said:

Hello again @tuanphan - I was able to figure out how to do this. Thanks again for your help. 🙂

Hi @tuanphan - I've come with 2 other questions. On the homepage of the site if you scroll down towards the middle of the page I have "The Blog" and I have excerpts of 3 of my blog posts (gold, white, and gray) - How would I go about changing the color of the titles - I want gold to be the color gold, white to be white, etc... And I would also like the buttons that say "read more" "coming in february" to be a different color as well, instead of the black button.

http://www.welcometothecolorverse.com - Password: Sunny123

Also on my blog page which you can access by clicking on "read" on the top navigation - as you can see right now the title of the blog is "gold" but gold is in blue. How can I change the color of that?

Thanks for your help.

On 1/5/2022 at 6:41 AM, mcmushroom said:

This chain has been so helpful. Anyone what code to add to make the dropdown background in nav smaller. 

This one made it wider

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 300px;
}

But when I changes the 300 to a smaller number it didn't respond. 

Awards and Films are the nav in question. Thanks to anyone that can help.

https://carillon-broccoli-7tgf.squarespace.com/

password :password!!!333

password is incorrect

password!!!333

On 1/7/2022 at 1:06 AM, TCVSquarespace said:

Hi @tuanphan - I've come with 2 other questions. On the homepage of the site if you scroll down towards the middle of the page I have "The Blog" and I have excerpts of 3 of my blog posts (gold, white, and gray) - How would I go about changing the color of the titles - I want gold to be the color gold, white to be white, etc... And I would also like the buttons that say "read more" "coming in february" to be a different color as well, instead of the black button.

http://www.welcometothecolorverse.com - Password: Sunny123

 

Also on my blog page which you can access by clicking on "read" on the top navigation - as you can see right now the title of the blog is "gold" but gold is in blue. How can I change the color of that?

 

Thanks for your help.

 

 

Add to Design > Custom CSS

/* the blog */
.user-items-list-item-container[data-section-id="61aa520fe389162602cf9ccb"] {
li:nth-child(1) h2 {
    color: yellow !important;
}
li:nth-child(1) a.list-item-content__button {
    background-color: yellow !important;
}
li:nth-child(2) h2 {
    color: red !important;
}
li:nth-child(2) a.list-item-content__button {
    background-color: red !important;
}
li:nth-child(3) h2 {
    color: blue !important;
}
li:nth-child(3) a.list-item-content__button {
    background-color: blue !important;
}
}

#2. Where is blog?

On 1/8/2022 at 5:01 AM, tuanphan said:

Add to Design > Custom CSS

/* the blog */
.user-items-list-item-container[data-section-id="61aa520fe389162602cf9ccb"] {
li:nth-child(1) h2 {
    color: yellow !important;
}
li:nth-child(1) a.list-item-content__button {
    background-color: yellow !important;
}
li:nth-child(2) h2 {
    color: red !important;
}
li:nth-child(2) a.list-item-content__button {
    background-color: red !important;
}
li:nth-child(3) h2 {
    color: blue !important;
}
li:nth-child(3) a.list-item-content__button {
    background-color: blue !important;
}
}

#2. Where is blog?

You are a lifesaver. Thar code worked. Thank you.

Try this for the blog: https://welcome-to-the-colorverse.squarespace.com/blog The first post is gold. how do I change the title gold to the color gold. Right now it's in blue. Also I would like to change the color of all future blog post titles that will come up there.

16 hours ago, TCVSquarespace said:

You are a lifesaver. Thar code worked. Thank you.

Try this for the blog: https://welcome-to-the-colorverse.squarespace.com/blog The first post is gold. how do I change the title gold to the color gold. Right now it's in blue. Also I would like to change the color of all future blog post titles that will come up there.

Use this CSS

/* blog title */
h1.blog-title a {
    color: gold;
}

On 1/3/2022 at 12:09 PM, TCVSquarespace said:

Hello again @tuanphan - I was able to figure out how to do this. Thanks again for your help. 🙂

Hi @tuanphan - while I was able to figure out how to change the color of all the drop down links it seems that it only worked for desktop. The same with the main navigation links. They are all just one color. How can this be changed on mobile? I want my main navigation links and the drop down links to all be different colors.

On 1/15/2022 at 10:30 PM, TCVSquarespace said:

Hi @tuanphan - while I was able to figure out how to change the color of all the drop down links it seems that it only worked for desktop. The same with the main navigation links. They are all just one color. How can this be changed on mobile? I want my main navigation links and the drop down links to all be different colors.

Do similar this code (for Gold in Look folder)

/* Gold in Look Folder - Desktop and Mobile */
.header-nav-folder-item:nth-child(1) a, [data-folder="/look"] div div:nth-child(2) a {
    color: gold !important;
}

On mobile, the items will run from 2 to higher

(1 is for "Back" text)

@tuanphan hey there, having a similar issue to OP but unsure how to fix. 

URL: hikingmyfeelings.org

When I'm on a page that's nestled within a drop-down menu, that particular drop down whites out the box and you can't read the links. Since our programs and offerings have their own branding/coloring, I'm not sure how to fix on each page. 

When I'm on our Blog page and hover over Community folder:

When I hover over other folders on navigation:  

From our Blaze Your Own Trail to Self-Love page (under programs):

When I hover other other folders from that page:

Is it a matter of doing the custom code on each page header and matching the colors to the branding for that particular page? If so, could you provide that code and I can swap out the HEX codes? 

On 2/10/2022 at 12:11 AM, hikingmyfeelings said:

@tuanphan hey there, having a similar issue to OP but unsure how to fix. 

URL: hikingmyfeelings.org

When I'm on a page that's nestled within a drop-down menu, that particular drop down whites out the box and you can't read the links. Since our programs and offerings have their own branding/coloring, I'm not sure how to fix on each page. 

When I'm on our Blog page and hover over Community folder:

When I hover over other folders on navigation:  

From our Blaze Your Own Trail to Self-Love page (under programs):

When I hover other other folders from that page:

 

Is it a matter of doing the custom code on each page header and matching the colors to the branding for that particular page? If so, could you provide that code and I can swap out the HEX codes? 

To change dropdown background on one page, just add this code to Page Header

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

Here's a weird one. My dropdown menus seem to have separated into individual blocks. Anyone have any idea why? I'd like the whole drop down to be one block containing all the links...

Help!

18 hours ago, Funjob said:

Here's a weird one. My dropdown menus seem to have separated into individual blocks. Anyone have any idea why? I'd like the whole drop down to be one block containing all the links...

Help!

What is your site url? We can check easier

https://www.underhereyes.com/

23 hours ago, Funjob said:

https://www.underhereyes.com/

 

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