Shopify themes, liquid, logos, and UX
I want to change the menu/nav color in the Dawn theme.
does anyone have code for this?
Thank you
Solved! Go to the solution
This is an accepted solution.
hii, @ebon
Paste this code on top of the base.scss file.
a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
color: black !important;
}
summary.header__menu-item.list-menu__item.link.focus-inset {
color: black !important;
}
Thank You.
This is an accepted solution.
@ebon
Paste this code for font-size.
summary.header__menu-item.list-menu__item.link.focus-inset {
font-size: 20px !important;
}
a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
font-size: 20px !important;
}
Thank You.
preacha.com
the main menu is the what i want to change.
Black is the color thank you
Please add the following code at the bottom of your assets/base.css file.
.header__menu-item, .header__menu-item:hover { color: #000 !important; }
Hope this works.
Thanks!
@dmwwebartisan your solution worked for me on Sense Theme 2.0 Thankyou! Is there something I need to add to make the mobile site the same?? This has only changed the desktop site.
This is an accepted solution.
hii, @ebon
Paste this code on top of the base.scss file.
a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
color: black !important;
}
summary.header__menu-item.list-menu__item.link.focus-inset {
color: black !important;
}
Thank You.
Thank you!
how do you make the font bigger?
This is an accepted solution.
@ebon
Paste this code for font-size.
summary.header__menu-item.list-menu__item.link.focus-inset {
font-size: 20px !important;
}
a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
font-size: 20px !important;
}
Thank You.
in the same spot along with the last code?
what if i want to change only one specific item's color?
@Eleftheria2022
you can change by providing the conditions on it.
{% if product == 'your product name ' %}
{
.element{color:red;}
}
i mean if i want to change a specific collection's color in menu/nav to red, what code do i have to enter?
example below the collection "ΠΡΟΣΦΟΡΕΣ"
thanks in advance.
another "REAL" example but in wordpress.
@Eleftheria2022 try this on bottom base.css
.list-menu a[href="/collections/προσφορές"] {
color:#ff0000!important;
}
Here is your video to change "SALES" badge to percentage
https://www.youtube.com/watch?v=JPU6cmJ_2Gg
Also you code doesn't working.
yes dawn theme 2.1.0. version
yeah sure. code is still applied, i also tried #ff7000 and just "red" but nothing happend.
Thank you
Hi there,
this only seems to work on desktop, but not on mobile? Could you maybe share a code that changes the color on all devices?
Hi, and if i wanna change the background on hover the menu i have to code:
a:hover.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
}
??? correct me if i made a mistake please
Hello Luco001
I found a solution for me and i changed it by searching all my elements via DevTools.
If you use Dawn theme and want me to help you let me know.
Thank you.
hiiii yes your help will bwe more than welcome
I send a personal message to your profile here in community, let me know when you reply to check my inbox.
Thanks.
would love a solution to this too please thanks
What if I want to change the background color of the navigation? How would I do that?
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024