Home › Forums › Jevelin Theme › Sub menu nth-child styling
Home › Forums › Jevelin Theme › Sub menu nth-child styling
Hello!
I have a nth-child styling to my primary/parent nav, but I don’t want it to attribute to the sub nav (as seen in the attached screenshot). I’m not sure what I need to call different for the primary to separate the two.
This is the styling I currently have under custom code (it’s the green “button” effect that’s showing up on the fifth item in the primary and sub navs:
/* NAVIGATION CTA BUTTON */ .sh-header .menu-item:nth-child(5) a { background-color: #38d430 !important; color: #fff !important; border-radius: 10px !important; padding: 6px 26px !important; position: relative; top: 22px; left: 0px; } .sh-header .menu-item:nth-child(5) a:hover { background-color: #00698f !important; border-color: transparent !important; color: #fff !important; transition: all 0.3s ease-in-out !important; }
Thank you for your help!
Laurel
Solution for this topic
Hi Laurel,
I hope you are well today and thank you for your question.
Please try changing the CSS code as following.
/* NAVIGATION CTA BUTTON */ .sh-header .sh-nav-container > ul > li.menu-item:nth-child(5) a { background-color: #38d430 !important; color: #fff !important; border-radius: 10px !important; padding: 6px 26px !important; position: relative; top: 22px; left: 0px; } .sh-header .sh-nav-container > ul > li.menu-item:nth-child(5) a:hover { background-color: #00698f !important; border-color: transparent !important; color: #fff !important; transition: all 0.3s ease-in-out !important; }
Best regards,
Shufflehound team
That did the trick 🙂 Looks like I just needed to get a little more specific with what I was calling. Thank you!
You are most welcome here 🙂