Shopify themes, liquid, logos, and UX
Hi community!
Managed to change the colour for the desktop site using this code:
.header__primary-nav-item[data-title="Sale"] {
color: red;
}
But it won't change on the mobile site.
Also, I would like to increase the font-size of just the header text on desktop.
Somebody please help me, I've been at this all day 😞
Here is my website:
Hello @afwanfhaider
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width:767px){
.header-sidebar__scroller li:last-child {
color: #ff0000 !important;
}
.header-sidebar__scroller .h6 {
font-size: 18px !important;
}
}
</style>
Hi @niraj_patel
Thank you for your solution! The color change worked, but I wanted to change the desktop font-size, not the mobile.
Any suggestions?
Much appreciated!
Hello @afwanfhaider
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px){
#shopify-section-sections--20237087506767__header li.header__primary-nav-item a {
font-size: 20px !important;
}
#shopify-section-sections--20237087506767__header li.header__primary-nav-item summary {
font-size: 20px !important;
}
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Thanks
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025