Styling for one navbar menu button is applying to a submenu item in dropdown

[ccbeglin]

Hello team!

I’m working in the staging area of my site and have a question. Link is: https://pacify2dev.staging.wpengine.com/

I have special css to make one menu item in my navbar look like a pill-shaped purple button:

.x-navbar li:last-child a span {
background: #6F59A5;
color: #FFFFFF;
border-radius: 8.35em;
}

.x-navbar li:last-child:hover a span {
background: #C282B8;
color: #FFFFFF;
border-radius: 8.35em;
}

However, I’ve just added another main nav dropdown menu (About), and it seems that that code is applying to the last menu item in that drop-down (“Newsroom”). Can you please advise how I can make it so that only the “Get in Touch” item has the button styling, and not the “Newsroom” sub item?

Thank you!

[jade]

Hi there,

Please update you code to:

.x-navbar .desktop .x-nav > li:last-child > a > span {
    background: #6F59A5;
    color: #FFFFFF;
    border-radius: 8.35em;
}

.x-navbar .desktop .x-nav > li:last-child:hover a span {
    background: #C282B8;
    color: #FFFFFF;
    border-radius: 8.35em;
}

Hope this helps.

[ccbeglin]

This worked perfectly, thank you as always!

[Prasant]

You are most welcome.