I would like to Update the color for “Appointment Booking” on my website to Bold and Red. How do I do that ?
Please help.
Topic summary
A store owner wants to make their “Appointment Booking” navigation menu item bold and red.
Solutions Provided:
- Two different CSS code snippets were offered to target the second menu item and apply red color with bold font-weight
- One solution uses
nav.primary-navselector with:nth-child(2) - Another targets
.primary-nav__itemswith similar child selectors - Both approaches modify whichever link appears in the second position of the main menu
Current Issue:
- The CSS successfully changed the desktop navigation styling
- However, the change only affects desktop view
- The mobile navigation remains unchanged
- The user is now asking how to apply the same styling to the mobile menu
Status: Unresolved - awaiting guidance on mobile-specific CSS implementation.
Hi @anayabeautybox ,
You can add this code to your custom style sheet (custom.css.liquid)
nav.primary-nav.header-navs__items.js-primary-nav > ul > li:nth-child(2) > a {
color: red;
font-weight: bold;
}
So, the way your menu is setup, there is no way to isolate the appointment booking link. So, the code above is going to make any item in the main menu’s second slot red and bold. This will work for what you need but, if you re-arrange the menu, whatever link is in the 2nd slot of the main menu will get those style changes.
Hope this helps!
1 Like
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.primary-nav__items .primary-nav__item:nth-child(2) .primary-nav__link.animsition-link
{
color: red;
font-weight: 800;
}
1 Like
Thank you so much 
Wait it only turned the 2nd Item red on the Desktop site… how do I make the same change for Mobile devices ?
