Liquid, JavaScript, themes, sales channels
For anybody's reference, I am currently using the Dawn 2.0 Shopify Theme and the only code edit I have made so far is this
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;
}
a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset {
color: #e0b276 !important;
}
summary.header__menu-item.list-menu__item.link.focus-inset {
color: #e0b276 !important;
}
Hey, looking to change the navigation menu options to my brands logo colours. Managed to do it on desktop with some tinkering in the code however you can see that the menu option "home" is selected but when selected shows the colour black. I am wanting to make it show the colour white when selected.
The code edits also did not translate to mobile.
Both the burger menu icon and text as seen in this image https://snipboard.io/cy4gHL.jpg are black and was hoping to make it gold like the logo.
The usual shopify icons are also black (Shopping Cart, Search Icon etc.) is there a way to make them gold as well?
Thanks for any help in advance. It is incredibly appreciated.
Solved! Go to the solution
This is an accepted solution.
Hey @itscheeky
You need to change the styles of the following elements as well:
.header__icon,
.menu-drawer__close-button:focus,
.menu-drawer__close-button:hover,
.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item:hover,
.list-social__link,
.link--text,
.header__active-menu-item {
color: #e0b276 !important;
}
This is an accepted solution.
hi, @itscheeky
Paste this code on top of the component-menu-drawer.css file.
ul.menu-drawer__menu.list-menu li a {
color: white !important;
}
summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset {
color: white !important;
}
Thank You.
Hii, @itscheeky
Kindly share your store URL so,
I can solve it perfectly.
Thank You.
This is an accepted solution.
Hey @itscheeky
You need to change the styles of the following elements as well:
.header__icon,
.menu-drawer__close-button:focus,
.menu-drawer__close-button:hover,
.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item:hover,
.list-social__link,
.link--text,
.header__active-menu-item {
color: #e0b276 !important;
}
This is an accepted solution.
hi, @itscheeky
Paste this code on top of the component-menu-drawer.css file.
ul.menu-drawer__menu.list-menu li a {
color: white !important;
}
summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset {
color: white !important;
}
Thank You.
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