Jump to content

Dropdown Menu colour Squarespace 7.1

Go to solution Solved by tuanphan,

Recommended Posts

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
  • 2 weeks later...

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

Screen Shot 2021-12-17 at 3.57.32 PM.png

Link to comment
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;
}

Screen Shot 2021-12-17 at 3.57.32 PM.png

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment
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. 🙂

Link to comment

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

TealLogo_name.thumb.png.38a64c410d88075d71003974a8904338.png

Pattie McNab I www.tealbranding.com I pattie@tealbranding.com

Link to comment
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.

 

 

Link to comment
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

@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:1648993994_ScreenShot2022-02-09at12_05_08PM.thumb.png.b866256a323f8d5f85f87a9e6b669e93.png

When I hover over other folders on navigation:  

1517432158_ScreenShot2022-02-09at12_05_16PM.thumb.png.220758663ea1ef9563be1bbff12c36eb.png

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

1423287969_ScreenShot2022-02-09at12_08_56PM.thumb.png.394b9f015f4e4ac8062db646d29dfe8a.png

When I hover other other folders from that page:

1244180868_ScreenShot2022-02-09at12_09_02PM.thumb.png.bbe53219651a3886edd848ae2f5a42fe.png 

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? 

Link to comment
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:1648993994_ScreenShot2022-02-09at12_05_08PM.thumb.png.b866256a323f8d5f85f87a9e6b669e93.png

When I hover over other folders on navigation:  

1517432158_ScreenShot2022-02-09at12_05_16PM.thumb.png.220758663ea1ef9563be1bbff12c36eb.png

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

1423287969_ScreenShot2022-02-09at12_08_56PM.thumb.png.394b9f015f4e4ac8062db646d29dfe8a.png

When I hover other other folders from that page:

1244180868_ScreenShot2022-02-09at12_09_02PM.thumb.png.bbe53219651a3886edd848ae2f5a42fe.png 

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>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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!

image.thumb.png.d36ef9b305f736b7c3bc37e4bd4cc501.png

What is your site url? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
23 hours ago, Funjob 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;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.