[Resolved] Style Single Item In Secondary Navigation

[Rylan Urban]

I’ve been able to style a single item in the primary navigation with CSS class and this CSS:

.main-navigation .main-nav ul li.solar-cta a {
border: 2.5px;
border-radius: 5px;
border-style: solid;
border-color: #068743;
line-height: 37px;
vertical-align: centre;
background-color: #068743;
color: #FFF;
}

.main-navigation .main-nav ul .solar-cta.current-menu-item > a,
.main-navigation .main-nav ul .solar-cta.current-menu-parent > a,
.main-navigation .main-nav ul .solar-cta.current-menu-ancestor > a {
}

.main-navigation .main-nav ul li.solar-cta > a:hover,
.main-navigation .main-nav ul li.solar-cta.sfHover > a {
background-color: transparent;
color: #000;
}

But I can’t figure out the CSS needed to style a single element in the secondary navigation. Here is the website: http://solarpanelpower.ca

Can you please help me out? Thanks – Rylan!

[Leo]

Hi Ryan,

Which menu item are you trying to style in the secondary navigation?

Let me know.

[Rylan Urban]

Uh well it doesn’t matter. For the example I gave… I would simply assign the class as solar-cta for whatever one I wanted in the edit menu page.

I’m looking to do the same thing for the secondary menu but don’t know the right CSS code to do it!

[Leo]

Ahh I see. It should be .secondary-navigation .main-nav ul li. Or you’ve already tried that?

[Leo]

I’ve edited the selector above a bit.

If it’s not working, add the class anyways and let me know which menu item you’ve added to then I’ll see if it’s being overwritten by something else.

[Rylan Urban]

Yup! That worked exactly! Check it out.

Ok now one more thing I couldn’t figure out earlier..

first, hover the menu items like Saskatchewan, alberta etc.
You can see there is spacing on both the left and right hand side when hovered. How to remove spacing? and I’ve tried using the customizer.. fluid and contained and all that. Doesn’t work. Some sort of spacing element I can’t figure out how to edit

[Leo]

Try this CSS:

.secondary-navigation .inside-navigation {
    padding: 0;
}

Let me know.

[Rylan Urban]

Perfect! God I love your guy’s support. Let me know how I can help you out in return! Other thank buying you “coffee” which I already do once in a while 🙂

[Rylan Urban]

Thanks again!

[Leo]

You’re very welcome! 🙂 Thanks for keep supporting GP!

[Author]

Posts