Changing Navigation Menu Styles

I'm using Upfront to edit the Scribe theme.
I have made some edits to the menu by selecting the settings and the css for the top-nav stylesheet.

There are two elements in the horizontal navigation menu that I can't figure out how to change:

1. Where do I change the hover background for menu sub-items?
2. How do I change or eliminate the separator "/" between top level menu items?

Thanks in Advance,
Stephan

  • Michael Bissett

    Hey @Stephan, hope you're doing well this evening! :slight_smile:

    #1: For that, you'd want to adjust the background property here:

    ul.sub-menu > li.menu-item > a {
        font: 15px Cantana One;
        text-align: center;
        background: none;
        color: #ffffff;
        border-bottom: none;
    }

    #2: The code you'd be looking for would be this:

    ul.menu > li.menu-item:before {
        content: "/";
        color: #ffffff;
    }

    Remove the "content" property there, and that / will disappear. :slight_smile:

    Hope this helps!

    Kind Regards,
    Michael

  • Stephan

    Thanks!
    #1 works fine, however it looks like the code for #2 is hosed up...
    the first 7 lines of the style sheet looks like this:

    div[data-style='horizontal'] ul.menu > li.menu-item > a, div[data-style='vertical'] ul.menu > li.menu-item > aul.menu > li.menu-item:before {
        content: "/";
        color: #ffffff;
        font-family: PT Sans;div[data-style='horizontal'] ul.menu, div[data-style='vertical'] ul.menudiv[data-style='horizontal'] ul.menu > li.menu-item > a, div[data-style='vertical'] ul.menu > li.menu-item > adiv[data-style='horizontal'] ul.menu > li.menu-item:hover > a, div[data-style='vertical'] ul.menu > li.menu-item:hover > a
        font-weight: 400;
        font-style: normal;
    }

    So the mods to the Content property don't work...

    Suggestions?

    Thanks again,
    Stephan

  • Michael Bissett

    Hey @Stephan,

    Hmm... that's odd, could you try changing that code you mentioned to this:

    div[data-style='horizontal'] ul.menu > li.menu-item > a, div[data-style='vertical'] ul.menu > li.menu-item > aul.menu > li.menu-item:before {
        content: "";
        color: #ffffff;
        font-family: PT Sans;div[data-style='horizontal'] ul.menu, div[data-style='vertical'] ul.menudiv[data-style='horizontal'] ul.menu > li.menu-item > a, div[data-style='vertical'] ul.menu > li.menu-item > adiv[data-style='horizontal'] ul.menu > li.menu-item:hover > a, div[data-style='vertical'] ul.menu > li.menu-item:hover > a
        font-weight: 400;
        font-style: normal;
    }

    If that doesn't work, could you please revoke & re-enable Support Access to your site? I tried getting in to have a closer look at this, but I keep getting an invalid access token error.

    Thanks! :slight_smile:

    Kind Regards,
    Michael

  • Michael Bissett

    Hey @Stephan,

    I was able to accomplish this for you by changing this:

    ul.menu > li.menu-item:first-child:before {
        content: "";
    }

    To this:

    ul.menu > li.menu-item:before {
        content: "";
    }

    And adding in these rules:

    ul.menu > li.menu-item > a {
        padding-left: 10px;
        padding-right: 10px;
    }
    li.menu-item-has-children > a:after {
    right: -2px;
    }
    li.menu-item-has-children:hover > a:after {
    right: -4px !important;
    }

    How does that look to you? :slight_smile:

    Please advise,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.