Sub menu nth-child styling

Home › Forums › Jevelin Theme › Sub menu nth-child styling

Home › Forums › Jevelin Theme › Sub menu nth-child styling

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    RESOLVED Posts

  • hersickwebster
    Participant

    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

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    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

    hersickwebster
    Participant

    That did the trick 🙂 Looks like I just needed to get a little more specific with what I was calling. Thank you!

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

Popular choice

Professional Developers At Your Fingertips!

If you need services beyond standard support, we've got your back!

Services we offer:

Demo setup
Advanced customization
Layout adjustment
Graphic work / visualizations
Custom coding
Full WordPress development and design

Services

What we can offer

  • Demo setup +

    If you'd prefer not to handle the installation yourself or need help getting started, we'll set everything up for you.

  • Layout adjustment +

    We'll help you rearrange sections, adjust spacing, and modify the page structure to fit your needs.

  • Advanced customization +

    More complex styling changes, theme option modifications, and third-party integrations.

  • Custom coding +

    If you need something that's not included in the theme, we can code it for you.

  • Graphic work / visualizations +

    Web design services to create custom sections, pages, and blocks for your theme, plus graphics and visualizations.

  • Full WordPress development and design +

    Full website builds, custom theme development, or plugin creation from scratch.

  • About pricing +

    We'll provide a clear quote based on what you need. No hidden fees.

Professional Developers At Your Fingertips!

Custom Work Form