Vertical devider in Bootstrap navbar

[donboe]

I am using a Bootstrap navbar. I am trying to add a vertical divider just after the last regular menu-item with a shoppingcart item right after that. This is the HTML:

<div class="collapse navbar-collapse" id="mainNav">
	<ul class="navbar-nav ml-auto">
    	<li class="nav-item home"><a class="nav-link" href="/">Home</a></li>
        <li class="nav-item shop"><a class="nav-link" href="/shop">Shop</a></li>
        <li class="nav-item about"><a class="nav-link" href="/about">About</a></li>
        <li class="nav-item contact"><a class="nav-link" href="/contact">Contact</a></li>
        <li class="nav-item cart"><a class="nav-link" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
	</ul>
</div> 

I tought I could accomplisch this by using the css :after propery on the last regular menu item, like:

#mainNav .contact:after {
	content: '|';
	padding-left: .5em;
	padding-right: .5em;	
}

But that doesn’t work. Instead hhe vertical line is placed below the menu while the shopping cart is inline with the other menu items. What am I missing?

Thank you in advance!!

[coothead]

Hi there donboe,

using this…

#mainNav .contact::after {
    content: '|';
    padding: 0  0.5em;	
 }

…produces this…

If that is not what you require, then your problem lies elsewhere.

coothead

[donboe]

Hi there Coothead. No that is not where I’m after.

This is a screenshot of how it is showing right now:

As you can see is the vertical devider placed below the menu while it should appear inbetween the Contact anchor and the shopping cart.

[coothead]

Hi there donboe,

as I pointed out; “your problem lies elsewhere”

This test code…

#mainNav ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
 }
 
#mainNav .contact::after {
    content: '|';
    padding: 0  0.5em;	
 }

…produces this…

I would naturally assume that your problem is BootStrap.

coothead

[donboe]

Hi @coothead. I am not sure where I’m going wrong than? Like I said I’m using Bootstrap. I don’t see anything out of the ordinary.

Edit: When I change:

#mainNav .contact::after {
    content: '|';
    padding: 0  0.5em;	
 }

into:

#mainNav li.cart::before {
    content: '|';
    padding: 0  0.5em;
	color: RGB(232, 202, 200);	
}

The vertical devider is indeed on the same line as the menu but then the cart is pushed below the menu!

[PaulOB]

The anchors in that bootstrap menu are set to display:block so when you place anything after a block element it naturally goes on to the next line.

If you place your divider on the anchor using :after and not the list element it will stay on the same line

#mainNav .contact a:after {
	content: '|';
	padding-left: .5em;
	padding-right: .5em;

}

[donboe]

@PaulOB

#mainNav .contact a:after

I should have looked at the properties . Thanks a lot @PaulOB