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

Solved
itscheeky
New Member
2 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)

Accepted Solutions
Evgeniy-M
Excursionist
35 6 7

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
2571 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 4 (4)
Zworthkey
Shopify Partner
2571 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Evgeniy-M
Excursionist
35 6 7

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
2571 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post