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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024