[Resolved] Separators in Menu/Nav Bar

Home Forums Support Separators in Menu/Nav Bar

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #129543
    Herschel

    Hi all,

    I would like to add a separator like “|” between menu items on my menu/navigation bar.

    Can anyone tell me what CSS code to use for this as well as how to do it in different colors?

    Thanks.

    #129569
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    .main-navigation .menu > li > a {
        border-right: 1px solid #000000;
    }
    
    .main-navigation .menu > li:last-child > a {
        border-right: 0;
    }
    #129581
    Herschel

    Thanks Tom, but it still will not show up.

    I’m working offline in Xampp.
    I’m used the Simple Custom CSS Plugin for this.

    Should I add the code in somewhere else or what could be the problem?

    #129583
    Herschel

    Not to worry, I figured it.

    It works now – I added the code to style.css.

    Thanks.

    #129584
    Tom
    Lead Developer
    Lead Developer
    #276642
    Nick

    Hey Tom,

    This worked like a charm! Is there a way to make the border not be the whole height of the main navigation? Like if I wanted it to be like

    Menu Item | Menu Item 2 | Menu Item 3

    With the “separator” not being so tall?

    Thanks!

    #276701
    Tom
    Lead Developer
    Lead Developer

    Hmm using the border attribute will always go full height of the element.

    You could get fancy though..

    @media (min-width: 769px) {
        .main-navigation .main-nav > ul > li:not(:last-child) {
            position: relative;
        }
    
        .main-navigation .main-nav > ul > li:not(:last-child) > a:after {
            content: "";
            height: 20px;
            width: 1px;
            background: red;
            display: block;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -10px; /* half of your height */
        }
    }
    #276716
    Nick

    Hey Tom,

    This is why I’m such a fan of GeneratePress (and you). You go the extra mile to solve people’s problems. I’d done something similar in the past but not nearly as elegant since my CSS chops are average.

    Your solution works like a charm 🙂

    Thanks again for the stellar support.

    #276719
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help! 🙂

    #309690
    Heidi

    Just saying, best theme ever! I am building a restaurant site with separators in the Menu/Nav (thanks for the help there), but I also have a Centered Logo in the Nav and wanted to remove the separators before and after the Logo when full width, but keep them when it’s smaller than 1022px width. You can see the site in progress here: http://eathax.com
    Full width screenshot:
    http://eathax.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-24-at-9.47.53-AM.png

    1022px screenshot:
    http://eathax.com/wp-content/uploads/2017/04/Screen-Shot-2017-04-24-at-9.47.36-AM.png

    So, my question is, how do I modify specific separators?

    Thanks for your advice as always.

    #309849
    Tom
    Lead Developer
    Lead Developer

    Hi Heidi,

    First, you would use this selector instead of the one you’re using:

    .main-navigation .main-nav > ul > li:not(:last-child):not(.centered-navigation-logo) > a:after

    Then for the item before the logo, give it a class like this: ignore-border

    Then do this:

    @media (min-width: 1023px) {
        .main-navigation .main-nav > ul > li.ignore-border > a:after {
            display: none;
        }
    }
    #309876
    Heidi

    Ah ha! I get it now. Thanks so much for your speedy reply– as always! I tweaked the code a little to make it work:

    .main-navigation .main-nav > ul > li:not(:last-child):not(.centered-navigation-logo):not(.ignore-border) > a:after {
            content: "|";
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 20px;
    	color: #ac4c20;
        }
    
    @media (max-width: 1023px) {
        .main-navigation .main-nav > ul > li.ignore-border > a:after {
            content: "|";
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 20px;
    	color: #ac4c20;
        }
    }
    #309889
    Tom
    Lead Developer
    Lead Developer

    Perfect, thanks for sharing your code 🙂

    #331736
    Matthew

    Thank you for your excellent theme.

    I used the code you recommended above (your first recommendation) and it worked great for the horizontal menu navigation bar at the top of the page. As a side note the code did not work when I used the Simple CSS plugin but it worked great when I used WP’s built in additional CSS functionality.

    However, what I was wondering was how do I add separators to the menus that are vertical as part of the side bars?

    My regards,

    Matthew

    #331739
    Leo
    Staff
    Customer Support

    Hi there,

    If the code worked in Addtional CSS and not Simple CSS then it’s likely that there is a syntax error in the Simple CSS editor already which stops the code from executing.

    You can check here: https://jigsaw.w3.org/css-validator/#validate_by_input

    Can you provide a link to your site with the side bar menus? I thought each menu item should has its own row so doesn’t need to be separated?

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