DAWN THEME: How do I change the background / font color of ONE menu item?

Solved

DAWN THEME: How do I change the background / font color of ONE menu item?

AshHannah
New Member
5 0 0

Hi there -- I'm trying to make the last menu item (FREE Printables) look like a button so it sticks out from the others. Ideally white font with #F18031 background.

 

Here is a screenshot of my menu. (Thanks in advance for your help!)Screenshot.png

Accepted Solution (1)
eFoli-Marvic
Shopify Partner
223 40 39

This is an accepted solution.

Hi @AshHannah 

add this code to your base.css file.

Navigate to online store >> Click edit theme code.

Now find base.css and paste the following code.

 

 

.header__inline-menu .list-menu li:nth-child(4){background: #F18031 !important;}

.header__inline-menu .list-menu li:nth-child(4) a{color: white !important;}

 

 

I hope it will be helpful for you.

Thanks

 

Did it solve your issue?

 

   - If yes, Like & Mark As Solution to help the community

   - If not, let me know. also share a screenshot of the code that you added.

Marvic | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants

View solution in original post

Replies 12 (12)

KetanKumar
Shopify Partner
36941 3642 12003

@AshHannah 

yes please share store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

eFoli-Marvic
Shopify Partner
223 40 39

@AshHannah please share your store URL and password(If it is password protected.). So that I can check and give you the exact solution.

Marvic | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
AshHannah
New Member
5 0 0
Hi there: Affirmativities.com
Password: Open

Thanks!
eFoli-Marvic
Shopify Partner
223 40 39

This is an accepted solution.

Hi @AshHannah 

add this code to your base.css file.

Navigate to online store >> Click edit theme code.

Now find base.css and paste the following code.

 

 

.header__inline-menu .list-menu li:nth-child(4){background: #F18031 !important;}

.header__inline-menu .list-menu li:nth-child(4) a{color: white !important;}

 

 

I hope it will be helpful for you.

Thanks

 

Did it solve your issue?

 

   - If yes, Like & Mark As Solution to help the community

   - If not, let me know. also share a screenshot of the code that you added.

Marvic | EFOLI
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants
AshHannah
New Member
5 0 0

That worked! Thank you so much! 🙂 

J_Clarke_
Tourist
3 0 2

Hi there, 

 

This worked for me, thank you! However it also changed the colour of pages that dropped down, I only want to chain the main menu not items nested underneath... Any help would be great 🙂

Marta11
Tourist
6 0 3

Hi Marvic, how could we do it so it works on mobile as well? Just for this same one item of the menu? Thank you!

rpm2
Shopify Partner
10 0 1

Hello, can you help me with the same issue please?

I have the prestigie theme.

Marta11
Tourist
6 0 3
Hey!

I found a code element that helped me do it, however, it only works for the
desktop version and not on mobile. Also, if you have a dropdown menu, it
will apply as well.

The code is as follows (remember to change the #number with the colour
you'd like):
}
.header__inline-menu .list-menu li:nth-child(1){background: #FAFAFA
!important;}

.header__inline-menu .list-menu li:nth-child(1) a{color: #F8B105
!important;}

You can copy and paste it at the end of your base.css page.


rpm2
Shopify Partner
10 0 1
Mine is the prestige theme, i dont find a base.css page 😞
Thanks anyway!!
KetanKumar
Shopify Partner
36941 3642 12003

@rpm2 

oh sorry for that issue can you please send store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
rpm2
Shopify Partner
10 0 1

I Will send you by email. Many thanks!