Shopify themes, liquid, logos, and UX
I've been trying to figure out how to change the text color of one link at the top of my menu bar. I've been searching old threads to no avail, as my theme is a custom prestige based theme.
I'm trying to edit a link at the top called " SALE" Into red text color, can anyone help?
Hi
I will be rebranding working on DEBUT theme and trying to make my SALE menu red. Codes written up worked for my old theme (minimal) however cant make it work on debut. Please help
password; Yaggie95100
.index .scrollheader #logo a, .index .scrollheader .nav-container .shifter-handle, .index .scrollheader .nav-container ul#cart li a, .index .scrollheader .nav-container ul#cart li select.currency-picker, .index .scrollheader ul#main-nav li:nth-child(1) a {
color: red !important;
}
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->stylesheet.scss.liquid
Hi,
I have been through all the comments and have been unsuccessful. I am trying to highlight the word special offers to red on my website, and make it bold.
I am using the warehouse theme.
Can anyone help with this?
Thanks in advance.
Hi @ DeeJay,
Can you provide your website url so I can inspect?
Hello @DeeJay1 ,
Welcome to the Shopify community!
Share your store url with password.
I have been trying to find my Theme.scss.liquid file but I only have a Theme.Liquid file that I have access to. I am also wanting to change the colour of a sale collection in my header to grab attention.
Can you please help put "Sale" in red in both desktop and mobile
website link: www.boozeit.com.au
THANK YOuU
Hello Tim_Boozeit,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css.liquid
.tt-desctop-menu nav > ul > li:nth-child(3) a {
color: red;
}
.mmpanel.mmopened.mmcurrent > ul > li:nth-child(4) a {
color: red;
}
Can you please help me to put BLACK DAYS in the main menu for desktop and phone?
Thank you
Hello,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid
ul.site-nav li:nth-child(1) a {
color: red !important;
}
Hi @jaesva ,
Please Accept the solution.
Hi. Im currently using the Debutify theme and it's not working. Is there anywhere else I could paste this code
The CSS class for Debut theme's navigation seems to be .site-nav, so paste the following code at the bottom of your theme.css.liquid under the Assets folder:
/* change a sale collection link to red */
.site-nav a[href="/collections/sale"]
{ color: red; }
Change "sale" to whatever you've named your sale collection. If it's "Sale Items" your code would look like: .site-nav a[href="/collections/sale-items"]
You can change the word "red" to any color hex code. If you want a maroon color, your code would look like this: { color: #800000; }
If you would like to bold your text, add this to your code: font-weight: 700;
So your code would ultimately look like this:
/* change a sale collection link to red */
.site-nav a[href="/collections/sale"]
{ color: #d9aaa7;
font-weight: 700;}
(I wanted my "Sale" tab to be my branded pink color and bolded so this is the exact code I used. I also used all uppercase letters in my Navigation Menu editor. Check it out on my site: https://pinealvisionjewelry.com/)
I would love to know how to add a different color on hover for just the sale tab. If anyone knows what I need to add to this to achieve that I would be grateful.
Play around with this code on a copy of your theme so you can make sure it works before you apply it to your live theme.
Hi @acoh ,
Send your store URL
.site-nav a[href$='/collections/Sale'] {
color: red;
}
Hi,
My website is www.aliveplanet.com.au
I want to change the text color of Sale - a menu item to RED color. I've tried a few suggestions and added the code in this discussion but they didn't work. I use a custom theme
Can someone please help? Thanks a lot.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024