Solved

Changing the Main Menu Navigation Colours on Mobile and Desktop for Dawn Theme 2.0

itscheeky
New Member
4 0 0

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.

Accepted Solutions (2)
Evgeniy-M
Shopify Partner
44 6 10

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;
}

 

Liquid Ajax Cart — a Javascript library to build Shopify Ajax Carts using plain Liquid templates.

View solution in original post

Zworthkey
Shopify Partner
5581 642 1565

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.

View solution in original post

Replies 4 (4)

Zworthkey
Shopify Partner
5581 642 1565

Hii, @itscheeky 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

itscheeky
New Member
4 0 0

https://au.cheekysilk.com/

Password is silky

Evgeniy-M
Shopify Partner
44 6 10

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;
}

 

Liquid Ajax Cart — a Javascript library to build Shopify Ajax Carts using plain Liquid templates.
Zworthkey
Shopify Partner
5581 642 1565

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.