[Resolved] Style Single Item In Secondary Navigation

Home Forums Support Style Single Item In Secondary Navigation

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #274319
    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!

    #274361
    Leo
    Staff
    Customer Support

    Hi Ryan,

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

    Let me know.

    #274362
    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!

    #274363
    Leo
    Staff
    Customer Support

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

    #274364
    Leo
    Staff
    Customer Support

    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.

    #274423
    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

    #274430
    Leo
    Staff
    Customer Support

    Try this CSS:

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

    Let me know.

    #274565
    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 🙂

    #274566
    Rylan Urban

    Thanks again!

    #274765
    Leo
    Staff
    Customer Support

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.