How can I change the color of a single navigation menu item?

[lovehandmades]

Hi shopify community,

I am using the Sense theme. I want to highlight one (only) of the links on my main navigation bar. I want one link       (DONATE NOW) to have a #7E6767 background, white text colour and the rest of the links to have the same colour background as now. Can this be done ?

Here is my website : https://lovehandmades.com

Thank you!

Here is what my website header looks like, I would like to change the colour of the link that I circled below.

This is what I would like it to be like, except the font

[SpeedyDev · Accepted solution]

@lovehandmades 

details#Details-HeaderMenu-3 {
    border: 1px solid red;
    background: #7E6767 !important;
}

Add this code in the bottom of base.css file.

[Ahsan_ANC · Accepted solution]

Hi,

Can you try this code

1. Go to Online Store-> Theme->Sense theme->Edit code
2. Asset->/base.css ->paste the below code at the bottom of the file.

@media(min-width:786px){
#Details-HeaderMenu-3 > summary {
    padding: 20px 40px;
    background-color: #D82A1C;
    color: #fff;
}
}

[Ahsan_ANC · Accepted solution]

Please paste this code at the end of the base.css file

@media screen and (min-width: 786px){
.header--middle-left{
grid-template-columns: 19% 63% 13% !important;
}
#shopify-section-header > sticky-header > header > nav > ul{
display:flex !important;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(3){
margin-left: auto !important;
}
}

[Ahsan_ANC · Accepted solution]

Plz replace the highlighted code in image with the below code

 

@media screen and (min-width: 786px)
#shopify-section-header>sticky-header>header>nav>ul>li:nth-child(4) {
    margin-left: auto !important;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(4) > a{
color:#fff !important;
}

[IvGordiichuk]

try 
#Details-HeaderMenu-3 >summary>span {color: red;}

[WoodyDev]

Hi and welcome!

Add this to the bottom of your base.css file:

details#Details-HeaderMenu-3 {
    background-color: red !important;
    color: #fff !important;
}

[SpeedyDev · Accepted solution]

@lovehandmades 

details#Details-HeaderMenu-3 {
    border: 1px solid red;
    background: #7E6767 !important;
}

Add this code in the bottom of base.css file.

[lovehandmades]

Thank you so much! Do you also know how to move that link to the right side of the page, right next to the search logo? Thanks!

[Ahsan_ANC · Accepted solution]

Please paste this code at the end of the base.css file

@media screen and (min-width: 786px){
.header--middle-left{
grid-template-columns: 19% 63% 13% !important;
}
#shopify-section-header > sticky-header > header > nav > ul{
display:flex !important;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(3){
margin-left: auto !important;
}
}

[lovehandmades]

Hi thank you so much!

I changed the menu a bit at the top and now both the products and the donate now menu is moved to the right side of the page, and the colour background doesn't work anymore. How do I fix it? Thank you so much!

This is what I have at the end of the base.css file.

@media(min-width:786px){
#Details-HeaderMenu-4 > summary {
text-align: right;
border: 0.1px #AB7272;
background: #AB7272 !important;
color: #F1EDED;
}
}

@media screen and (min-width: 786px){
.header--middle-left{
grid-template-columns: 19% 63% 13% !important;
}
#shopify-section-header > sticky-header > header > nav > ul{
display:flex !important;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(3){
margin-left: auto !important;
}
}

[Ahsan_ANC · Accepted solution]

Plz replace the highlighted code in image with the below code

 

@media screen and (min-width: 786px)
#shopify-section-header>sticky-header>header>nav>ul>li:nth-child(4) {
    margin-left: auto !important;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(4) > a{
color:#fff !important;
}

[lovehandmades]

Sorry about this but the donate now button is still not at the far right of the page next to the search button, do you know how to fix it? Really sorry about that 😭😭

This is the code at the end of the base.css file now.

@media screen and (min-width: 786px){

.header--middle-left{
grid-template-columns: 19% 63% 13% !important;
}
#shopify-section-header > sticky-header > header > nav > ul{
display:flex !important;
}
@media screen and (min-width: 786px)
#shopify-section-header>sticky-header>header>nav>ul>li:nth-child(4) {
margin-left: auto !important;
}
#shopify-section-header > sticky-header > header > nav > ul > li:nth-child(4) > a{
text-align: right;
border: 0.1px #AB7272;
background: #AB7272 !important;
color: #F1EDED; !important;
}
}

[Ahsan_ANC · Accepted solution]

[lovehandmades]

Thank you so much!!

[ReturnPrime]

Hey  @lovehandmades   ,
Welcome to the Shopify community!
You can follow the instruction below:

please add this to your CSS file. 

#Details-HeaderMenu-3 > summary {
    color: #fff;
    background: #7E6767;
}

If you feel like my answer is helpful, please Like and mark it as a solution. Let me know if you have any further questions.
Thank you!
Raman

[Ahsan_ANC · Accepted solution]

Hi,

Can you try this code

1. Go to Online Store-> Theme->Sense theme->Edit code
2. Asset->/base.css ->paste the below code at the bottom of the file.

@media(min-width:786px){
#Details-HeaderMenu-3 > summary {
    padding: 20px 40px;
    background-color: #D82A1C;
    color: #fff;
}
}