Jump to content

Want to change color of ONE option in my menu

Recommended Posts

Is there a a way i could change the color of just ONE word in my menu bar? I want to draw attention to one specific tab. But, I don't want this tab to be the button at the end of the menu bar. 

I want it to stand out like this: 

Home   About Me    Gallery    Cultural Spotlight     Contact   (Button)

Edited by deoracatherine
Link to comment

Add to Home > Design > Custom CSS

a.header-nav-folder-title[href="/cultural-spotlight"] {
    color: pink !important;
    font-weight: bold;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
16 hours ago, deoracatherine said:

@tuanphan somehow my mobile menu background is now white, do you have code for changing the background color? i want it to be the same navy blue as the home page.

Use this

.header-menu-bg.theme-bg--primary {
    background: #f1f2f3 !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/14/2020 at 11:33 PM, deoracatherine said:

@tuanphan Thank you so much!!! one last question -- how do I change the text and social links colors now? they aren't very visible anymore with the new background color. 

Add to Home > Design > Custom CSS

nav.header-menu-nav-list * {
    color: white !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
On 11/10/2020 at 4:56 AM, mvorozco16 said:

Hi @tuanphan I'm trying to change the navigation bar links to Yellow #ffc933 in the "Who" and "For Whom" pages.

www.saragobbo.com

Which code should I use?

Thanks!

For future members, add to Page Settings > Advanced > Header

<style>
  .Header-inner.Header-inner--bottom * {
    color: #ffc933 !important;
}
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 10/16/2020 at 12:54 AM, tuanphan said:

Add to Home > Design > Custom CSS


nav.header-menu-nav-list * {
    color: white !important;
}

 

Thank you! I have a button in my mobile menu and I'm trying to change just the color of the button and cannot. Any ideas?

 

On 10/16/2020 at 12:54 AM, tuanphan said:

Add to Home > Design > Custom CSS


nav.header-menu-nav-list * {
    color: white !important;
}

 

 

Link to comment
On 10/13/2020 at 1:45 PM, tuanphan said:

Add to Home > Design > Custom CSS


a.header-nav-folder-title[href="/cultural-spotlight"] {
    color: pink !important;
    font-weight: bold;
}

 

@tuanphan could you please help in my website, www.drophouseamsterdam.nl i would like to change "design services" to red color to its more visible on the menu bar. thank you

Link to comment
1 minute ago, Drophouse said:

@tuanphan could you please help in my website, www.drophouseamsterdam.nl i would like to change "design services" to red color to its more visible on the menu bar. thank you

Add to Home > Design > Custom CSS

/* Design services item */
div.header-nav-item [href="/designservices"] {
    color: red !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 10/14/2020 at 4:52 AM, tuanphan said:

Use this


.header-menu-bg.theme-bg--primary {
    background: #f1f2f3 !important;
}

 

Thank you! I have a button in my mobile menu and I'm trying to change just the color of the button to pink (with white text) and cannot. Any ideas? Website is deoracatherine.com

Link to comment

Add the following to Design > Custom CSS.

Quote

I have a button in my mobile menu and I'm trying to change just the color of the button (to pink with white text

.header-menu .header-menu-cta a {

  background-color : #e61f93;
  border-color : #e61f93;
  color : #fff;
  
  }

This is for v7.1 and specific to the OP's need.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 year later...

Hi, I used css code to change the background + text color of 1 navigation bar item. It worked well as long as the selected navigation item was a drop-down folder:

image.thumb.png.f283959989f6add0dc629b2ed64ecbdb.png

 

Now I wanted to change the navigation link to 1 website instead to the folder, but now the text is not changing color and the navigation item is not readable as it's also white as the background:

image.thumb.png.c35c3d7957f7489945aa54f3e25f1d8c.png

This is what I have added as CSS code:

// Navigation Button 2 //
.header-nav-item:nth-child(5) {
  background: white !important; opacity: 0.8 !important;
  color: #FFFFFF !important;
  width: 140px;
  border-radius: 2px;
  text-align: center !important;
  border: 2px solid #FFFFFF !important;
}
.header-nav-item a[href="/termin-buchen"]
 {
    color: #474d52 !important; 
}

 

Do you know where the mistake is i.e. what I need to change?

the url is: www.manuelaschweizer.ch

 

thanks so much

manuela

Edited by Manuela
Link to comment
On 8/26/2022 at 3:40 PM, Manuela said:

Hi, I used css code to change the background + text color of 1 navigation bar item. It worked well as long as the selected navigation item was a drop-down folder:

image.thumb.png.f283959989f6add0dc629b2ed64ecbdb.png

 

Now I wanted to change the navigation link to 1 website instead to the folder, but now the text is not changing color and the navigation item is not readable as it's also white as the background:

image.thumb.png.c35c3d7957f7489945aa54f3e25f1d8c.png

This is what I have added as CSS code:

// Navigation Button 2 //
.header-nav-item:nth-child(5) {
  background: white !important; opacity: 0.8 !important;
  color: #FFFFFF !important;
  width: 140px;
  border-radius: 2px;
  text-align: center !important;
  border: 2px solid #FFFFFF !important;
}
.header-nav-item a[href="/termin-buchen"]
 {
    color: #474d52 !important; 
}

 

Do you know where the mistake is i.e. what I need to change?

the url is: www.manuelaschweizer.ch

 

thanks so much

manuela

It looks fine to me. Did you solve it?

image.png.1d1ca8dca93f9b8544ece7657a3581c9.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

Hi! 

I'm using the below code to make one of my nav items into a button. 
How do I make this apply to the mobile nav also? 

Quote

div.header-nav-item [href="/hiverside"] {
    background: #73C2FB !important;
  color: #FFFFFF !important;
  width: 120px;
  border-radius: 5px;
  text-align: center !important;

}

 

Link to comment
On 11/11/2022 at 12:45 AM, esevignymartel said:

Hi! 

I'm using the below code to make one of my nav items into a button. 
How do I make this apply to the mobile nav also? 

 

What is site url? Or which template?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.