Solved

How to highlight a main menu item in Dawn 4.0?

Sam_DTB
Tourist
12 0 0

Hi,

 

Using Dawn 4.0 - dogtreatboutique.co.uk

 

I am trying to get the "SHOP" item in the main menu to have a red background and white text.

 

I tried adding

 

 

a[href^="/collections/shop"] span {color: red !important;}

 

 

to the base.css file but doesn't seem to work.

 

Any suggestions please?

 

Thanks

 

Accepted Solutions (2)

GemPages
Shopify Partner
5604 1261 1224

This is an accepted solution.

Hello @Sam_DTB 

 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your assets/base.css  theme file.

3. Add the code at the end of the file:

 

.header__inline-menu .list-menu.list-menu--inline > li:nth-child(2) > details-disclosure >  details >  .header__menu-item > 
 svg,
.header__inline-menu .list-menu.list-menu--inline > li:nth-child(2) >  details-disclosure > details > .header__menu-item > span{
 color: #ffffff;
  text-decoration-color: #ffffff !important;
}
.header__inline-menu .list-menu.list-menu--inline > li:nth-child(2) >  details-disclosure > details > .header__menu-item{
  background: red;
}

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

dmwwebartisan
Shopify Partner
12321 2551 3712

This is an accepted solution.

@Sam_DTB 

//For Desktop
#Details-HeaderMenu-2 >summary.list-menu__item{
color: #fff; 
}
#Details-HeaderMenu-2> .header__menu-item .icon-caret{
color: #fff; 
}

#Details-HeaderMenu-2{
    background: red; 
}

//For Mobile
#Details-menu-drawer-menu-item-2{
    background: red; 
}

Try this

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 19 (19)

Ujjaval
Shopify Partner
1242 197 210

@Sam_DTB 
add below css into base.css

span.header__active-menu-item:first-child {
    color: white;
    background-color: red;
}

Ujjaval_0-1680173359556.png

 

Sam_DTB
Tourist
12 0 0

Hi Ujjaval, thanks for the response but on the home page this highlights the "HOME" button not the "SHOP" button and it seems to colour only the text background and not the whole button - any ideas?

dmwwebartisan
Shopify Partner
12321 2551 3712

@Sam_DTB 

 

shop-menu-color.jpg

Please add the following code at the bottom of your css file.

nav.header__inline-menu > ul > li:nth-child(2) {
    background: red; 
}
nav.header__inline-menu > ul > li:nth-child(2) span,svg{
    color: #fff; 
font-weight: bold;
}

 

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Sam_DTB
Tourist
12 0 0

Hi @dmwwebartisan,

 

Thanks for the reply - it does highlight the button ok, but:

 

1. in the sub menu the text has also become white and unreadable as a result

Screenshot 2023-03-30 at 12.39.24.png

How do I change the colour of the sub menu text?

 

2. On Mobile devices the menu icon the checkout and account buttons have become invisible - they still work if I click on them so I am guessing they've turned white?

 

Screenshot 2023-03-30 at 12.39.35.png

 

Any idea why this is happening?

 

Thanks for your help,

Sam

dmwwebartisan
Shopify Partner
12321 2551 3712

@Sam_DTB 

Please remove old  code and try to add this new one.

#Details-HeaderMenu-2 >summary.list-menu__item{
color: #fff; 
}
#Details-HeaderMenu-2> .header__menu-item .icon-caret{
color: #fff; 
}

#Details-HeaderMenu-2{
    background: red; 
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Sam_DTB
Tourist
12 0 0

Hi, @dmwwebartisan ,

 

Thanks - this works better with the sub menu now, but unfortunately doesn't seem to work on mobile resolutions/layouts? 

 

Screenshot 2023-03-30 at 15.18.54.png

dmwwebartisan
Shopify Partner
12321 2551 3712

@Sam_DTB 

Please try following code for desktop and mobile.

//For Desktop

#Details-HeaderMenu-2 >summary.list-menu__item{
color: #fff; 
}
#Details-HeaderMenu-2> .header__menu-item .icon-caret{
color: #fff; 
}

#Details-HeaderMenu-2{
    background: red; 
}

//For Mobile
#Details-menu-drawer-menu-item-2{
    background: red; 
}
#Details-menu-drawer-menu-item-2 >summary.list-menu__item{
color: #fff; 
}
#Details-menu-drawer-menu-item-2> .header__menu-item .icon-caret{
color: #fff; 
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Sam_DTB
Tourist
12 0 0

Hi @dmwwebartisan ,

 

Thanks again for your help - getting closer - the text of the button on mobile devices is now white but the background has not changed...

 

dmwwebartisan
Shopify Partner
12321 2551 3712

@Sam_DTB 

Please provide screenshot.

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Sam_DTB
Tourist
12 0 0

@dmwwebartisan screenshot attached

 

Screenshot 2023-03-31 at 10.55.31.png

dmwwebartisan
Shopify Partner
12321 2551 3712

@Sam_DTB 

Try this.

//For Desktop
#Details-HeaderMenu-2 >summary.list-menu__item{
color: #fff; 
}
#Details-HeaderMenu-2> .header__menu-item .icon-caret{
color: #fff; 
}

#Details-HeaderMenu-2{
    background: red; 
}

//For Mobile
#Details-menu-drawer-menu-item-2{
    background: red; 
}
#Details-menu-drawer-menu-item-2 >summary.list-menu__item{
color: #fff; 
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Sam_DTB
Tourist
12 0 0

@dmwwebartisan 

 

Nope - still white unfortunately 😕

dmwwebartisan
Shopify Partner
12321 2551 3712

This is an accepted solution.

@Sam_DTB 

//For Desktop
#Details-HeaderMenu-2 >summary.list-menu__item{
color: #fff; 
}
#Details-HeaderMenu-2> .header__menu-item .icon-caret{
color: #fff; 
}

#Details-HeaderMenu-2{
    background: red; 
}

//For Mobile
#Details-menu-drawer-menu-item-2{
    background: red; 
}

Try this

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Sam_DTB
Tourist
12 0 0

Hi @dmwwebartisan 

 

Thanks for trying, but no - the text is black now, but there is still no red background on the mobile "SHOP" button...

ElisevdB
Visitor
1 0 0

Hi! I've tried this for our own store and it works for the second menu item but I'd like to make it work on the fourth menu item. I tried replacing 2 for 4  in the code, see below but this doesn't seem to work.. Any suggestions on to make this work for the fourth menu item?

 

}

//For Desktop
#Details-HeaderMenu-4 >summary.list-menu__item{
color: #fff;
}
#Details-HeaderMenu-4> .header__menu-item .icon-caret{
color: #fff;
}

#Details-HeaderMenu-4{
background: seagreen;
}

//For Mobile
#Details-menu-drawer-menu-item-4{
background: seagreen;
}

oscprofessional
Shopify Partner
15905 2378 3087

Hello  @Sam_DTB 

Try this code if you find it helpful:

Go to Online Store >Theme>Edit code>Assets>base.css>add code at the bottom 

details-disclosure>details {
    background: red !important;
}
details[open]>.header__menu-item {
    color: #fff !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

SAN_MSWEB
Shopify Expert
1165 138 145

Hi @Sam_DTB 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

<style>

nav.header__inline-menu .list-menu li::nth-child(2) .header__menu-item.list-menu__item.link.focus-inset {background: red !important; color: white !important;}

</style>




Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

GemPages
Shopify Partner
5604 1261 1224

This is an accepted solution.

Hello @Sam_DTB 

 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your assets/base.css  theme file.

3. Add the code at the end of the file:

 

.header__inline-menu .list-menu.list-menu--inline > li:nth-child(2) > details-disclosure >  details >  .header__menu-item > 
 svg,
.header__inline-menu .list-menu.list-menu--inline > li:nth-child(2) >  details-disclosure > details > .header__menu-item > span{
 color: #ffffff;
  text-decoration-color: #ffffff !important;
}
.header__inline-menu .list-menu.list-menu--inline > li:nth-child(2) >  details-disclosure > details > .header__menu-item{
  background: red;
}

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Sam_DTB
Tourist
12 0 0

Hi @GemPages ,

 

Thanks - that works fine on a desktop.

 

Unfortunately, it doesn't seem to work on mobile resolutions/layouts:

 

Screenshot 2023-03-30 at 15.18.54.png

 

Any ideas?

 

Thanks,

Sam