Re: Change colour of single navigation menu

Solved

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

lovehandmades
New Member
5 0 0

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.

Screenshot 2022-07-22 at 8.11.46 PM.png

 

 

 

 

 

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

Screenshot 2022-07-22 at 8.12.48 PM.png

Accepted Solutions (5)
SpeedyDev
Trailblazer
199 17 39

This is an accepted solution.

@lovehandmades 

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

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

banned

View solution in original post

Ahsan_ANC
Shopify Partner
1394 253 324

This is an 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;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Ahsan_ANC
Shopify Partner
1394 253 324

This is an 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;
}
}

 

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Ahsan_ANC
Shopify Partner
1394 253 324

This is an accepted solution.

 

Plz replace the highlighted code in image with the below code

download (1).png

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

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Ahsan_ANC
Shopify Partner
1394 253 324

This is an accepted solution.

download (2).png

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Replies 12 (12)

IvGordiichuk
Shopify Partner
37 1 9

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

WoodyDev
Shopify Partner
578 115 192

Hi and welcome!

 

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

 

 

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

 

Woody, 29, Stafford, UK | If I helped you out, mark it as the solution and drop me a thumbs up! | This is just a hobby for me, not my full-time job, so tips are greatly appreciated! paypal.me/woodybruh | Developer for AimShop.com | Owner of WoodyDevelopments | Try the best Shopify page builder
SpeedyDev
Trailblazer
199 17 39

This is an accepted solution.

@lovehandmades 

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

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

banned
lovehandmades
New Member
5 0 0

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
Shopify Partner
1394 253 324

This is an 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;
}
}

 

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lovehandmades
New Member
5 0 0

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!

Screenshot 2022-07-30 at 2.20.12 PM.png

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
Shopify Partner
1394 253 324

This is an accepted solution.

 

Plz replace the highlighted code in image with the below code

download (1).png

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

 

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lovehandmades
New Member
5 0 0

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 😭😭

Screenshot 2022-07-30 at 5.59.08 PM.png

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
Shopify Partner
1394 253 324

This is an accepted solution.

download (2).png

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
lovehandmades
New Member
5 0 0

Thank you so much!!

ReturnPrime
Shopify Partner
438 63 102

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
Shopify Partner
1394 253 324

This is an 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;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search