Archived topic

Style Single Item In Secondary Navigation

9 replies · Started by Rylan Urban on February 4, 2017

Viewing posts 1–10 of 10

February 4, 2017 at 2:19 pm #274319

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!

February 4, 2017 at 3:22 pm #274361

Hi Ryan,

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

Let me know.

February 4, 2017 at 3:26 pm #274362

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!

February 4, 2017 at 3:28 pm #274363

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

February 4, 2017 at 3:32 pm #274364

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.

February 4, 2017 at 7:57 pm #274423

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

February 4, 2017 at 9:12 pm #274430

Try this CSS:

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

Let me know.

February 5, 2017 at 7:23 am #274565

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 :)

February 5, 2017 at 7:23 am #274566

Thanks again!

February 5, 2017 at 1:52 pm #274765

You're very welcome! :) Thanks for keep supporting GP!

This archived topic is closed to new replies.

Start building better websites today.