Trying to highlight "Shop" navigation link using "nth-child: (5)" but it is also changing drop downs

WestCreative
New Member
4 0 0

Hi, I am using the debut theme. I tried to stylize just our "shop" navigation link to stand out and it looks how I want it to but because I used "nth-child: (5) as the identifier, any drop downs that have a 5th menu item are also stylized. How do I identify just the "Shop" link? Here is a link to the site: https://dresdenholden.com/

Here is the code I used: 

/* Start */
.site-header nav ul li:nth-child(5) .site-nav__link .site-nav__label {font-weight: bold !important; color: white !important; background-color: rgb(191, 206, 194) !important; border-style: solid !important; border-color: rgb(191, 206, 194) !important; border-radius: 5px !important; padding-bottom: 3px !important; padding-right: 3px !important; padding-left: 3px !important}
/* End*/

Reply 1 (1)

WestCreative
New Member
4 0 0

I temporarily removed the code from the site since it isn't showing up the way I want it to. But here is the code again if anyone can figure out how to exclude drop down menu items from being stylized: 

/* Start */
.site-header nav ul li:nth-child(5) .site-nav__link .site-nav__label {font-weight: bold !important;
color: white !important;
background-color: rgb(191, 206, 194) !important;
border-style: solid !important;
border-color: rgb(191, 206, 194) !important;
border-radius: 5px !important;
padding-bottom: 3px !important;
padding-right: 3px !important;
padding-left: 3px !important}
/* End*/