Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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