How to bold main headings in header menu Dawn theme

[jewellerystore1]

I am using Dawn Theme. I would like to make all the main headings along the top of my mega menu to be bold. The headings View all, Categorise, Collections, Ready to ship.

I would also like a light drop shadow or a line to appear at the bottom of the mega menu if possible. 

Please help

Website link : https://nuijewellery.com.au/

Thank you!

[theycallmemakka · Accepted solution]

.mega-menu__list
{
    font-weight: 500;
}
ul.mega-menu__list > li > a:first-child {
 font-weight: 600;
}

Try adding above code to the bototm of assets/component-mega-menu.css

[theycallmemakka · Accepted solution]

Can you add the below codes at the end of previous code.

.mega-menu__content {
    box-shadow: 0 4px 2px -2px rgba(var(--color-foreground),.08);
}

[DelightCart]

@jewellerystore1 Go to assets/component-mega-menu.css and paste below csst at bototm of the fle.

.mega-menu__list
{
font-weight: bold;
}

[jewellerystore1]

Thank you! It has applied it to all the text though. Is it possible to apply to just the top row?

 

[DelightCart]

@jewellerystore1 Ok, Please add below css.

.mega-menu__link--level-2:not(:only-child)
{
font-weight: bold;
}

[jewellerystore1]

Can it apply to "View all" and "Ready to Ship" as well?

 

[theycallmemakka · Accepted solution]

.mega-menu__list
{
    font-weight: 500;
}
ul.mega-menu__list > li > a:first-child {
 font-weight: 600;
}

Try adding above code to the bototm of assets/component-mega-menu.css

[jewellerystore1]

Legend! That worked. 

Thank you both for you help 🙂

[jewellerystore1]

Do you know how to add a black line on the bottom of the mega menu? right now it's just white and would like a separator. 

Thanks!

[theycallmemakka · Accepted solution]

Can you add the below codes at the end of previous code.

.mega-menu__content {
    box-shadow: 0 4px 2px -2px rgba(var(--color-foreground),.08);
}

[jewellerystore1]

Brilliant thank you!

[jewellerystore1]

I just noticed it has applied bold text to the price of this second product in my featured collection on the home page.

 

[theycallmemakka · Accepted solution]

Hi @jewellerystore1 ,

This issue is caused due to the code that is present on base.css. If you have added any such code on  "base.css", try removing it once.