Re: Change The Color Of A Single Main Menu Item
Hello to all the Shopify community :-),
I need help for CSS coding on Studio Theme -> I would like to change the text color of only one of my main navigation menu to highlight it.
The "HALLOWEEN SPECIAL" navigation menu should appear In Orange rather than white
I tried to quibble with the code but nothing to do, the color does not change. I'm having trouble identifying my menu or placing my code incorrectly on my CSS stylesheet.
Website - https://shopjadeira.com/
Thank You!
Hi @ShopJadeira
Try this one.
- From your Shopify admin dashboard, click on "Online Store" and then "Themes".
- Find the theme that you want to edit and click on "Actions" and then "Edit code".
- In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#HeaderMenu-halloween-special > span {
color: #ff9900;
}
- And Save.
- Result:
I hope it help.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
a#HeaderDrawer-sale {
color: #ff0000;
}
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
a#HeaderMenu-sale, a#HeaderDrawer-sale {
color: red;
}
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @STIILI
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
a[href="/collections/big-sale"] {
color: red;
}
And Sve.
result:
Note: This will visible on the mobile and dekstop.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#sidebar-menu > div > div.header-sidebar__scroller > ul > li:nth-child(1) > a {
color: red;
}
#shopify-section-sections--22486993764638__header > height-observer > x-header > nav.header__primary-nav.header__primary-nav--center > ul > li:nth-child(1) {
color: red;
}
and save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Many thanks. But it doesn't work on me.
You insert theme on the @media
Please follow the image where the curly bracket should be.
Check where i transfer the 1 closing bracket. Then Save.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @jdawson99
Yeah, I think so 😅 they keep asking same question on the original post and I know every store is different.
Check this one for you.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
a#HeaderMenu-class-of-2025-1-4-zip, a#HeaderDrawer-class-of-2025-1-4-zip {
color: red;
}
And save.
Result:
Note: I also colored red on the mobile view.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @ChelseaCrew
Do you mean in the mobile view?
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
a[href="/collections/last-call"] {
color: red !important;
}
And Save.
Result:
You can take out the code that you add for the desktop. This will show on dekstop and mobile screen.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
a[href="/collections/yeni%CC%87-sezon"] {
color: red;
}
And sve.
result:
This will color the mobile and dekstop. Let me know if you like only the desktop. Thanks!
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi there,
Can you help me too? I'm trying the code but it's not working.
We want this to make in red on desktop and mobile view. This is our shop decarba.de
Hi @Vinsmoke00
Check this one.
- From you Admin page, go to Online Store > Themes
- Select the theme you want to edit
- Under the Asset folder, open the main.css(base.css, style.css or theme.css)
- Then place the code below at the very bottom of the file.
a.bold.link-faded-reverse, a.group.block.w-full {
color: red;
}
- And save.
- Result:
Note: I also change the color on the mobile view.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
I already added the code and it's working but one issue is in the mobile version some of the menus are affected check decarba.com to see it
Sorry but the code did this
Hi @EquiZone
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
#menu-drawer > div > div > nav > ul > li:nth-child(8) > details > summary > span, a[href="/collections/equestrian-sale"] {
color: red;
}
And Save.
result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @Skviotu
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
li.has-submenu.submenu-is-mega-menu:nth-child(1) > a {
color: red;
}
And Save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @mmoonndd
Yeah sure, check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
a#HeaderMenu-on-sale, a#HeaderDrawer-on-sale {
color: red;
}
Note: Paste it after the very last curly bracket } in the file.
And Save.
Result:
Its for mobile and desktop.
Hi @Fetchy
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
details#site-nav-item--4 summary {
color: #FF3C10;
}
div.slide-nav__wrapper > ul > li:nth-child(4) > button {
color: #FF3C10;
}
And Save.
result:
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024