[Resolved] Separators in Menu/Nav Bar

[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.

[Tom]

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;
}

[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?

[Herschel]

Not to worry, I figured it.

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

Thanks.

[Tom]

Awesome 🙂

[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!

[Tom]

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 */
    }
}

[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.

[Tom]

Awesome, glad I could help! 🙂

[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.

[Tom]

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;
    }
}

[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;
    }
}

[Tom]

Perfect, thanks for sharing your code 🙂

[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

[Leo]

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?

[Author]

Posts