How to highlight a main menu item in Dawn 4.0?

[Sam_DTB]

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

[GemPages · 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.

[Ujjaval]

@Sam_DTB 
add below css into base.css

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

[Sam_DTB]

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]

@Sam_DTB 

 

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

[Sam_DTB]

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

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?

Any idea why this is happening?

Thanks for your help,

Sam

[dmwwebartisan]

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

[Sam_DTB]

Hi, @dmwwebartisan ,

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

[dmwwebartisan]

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

[Sam_DTB]

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]

@Sam_DTB 

Please provide screenshot.

[Sam_DTB]

@dmwwebartisan screenshot attached

[dmwwebartisan]

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

[Sam_DTB]

@dmwwebartisan 

Nope - still white unfortunately 😕

[dmwwebartisan · 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

[Sam_DTB]

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]

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]

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

[INA_MSWEB]

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

[GemPages · 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.

[Sam_DTB]

Hi @GemPages ,

Thanks - that works fine on a desktop.

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

Any ideas?

Thanks,

Sam