Change navbar vertical divider

Question

I am trying to change the background image of a vertical divider class in Bootstrap. I have this menu:

<div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#"></a> <ul class="nav"> <li class="active"><a href="#">Nosotros</a></li> <li class="divider-vertical"></li> <li><a href="#">Servicios</a></li> <li class="divider-vertical"></li> <li><a href="#">Galer&iacute;a de fotos</a></li> <li class="divider-vertical"></li> <li><a href="#">Contacto</a></li> </ul> </div> </div> 

In my css, I try:

  .navbar .nav .divider-vertical{ background-image: url("img/nav-div.jpg"); } 

But nothing. Any ideas?

Answer 1

This is because its inner width is 0, since only fields add to the outer width:

 .divider-vertical { height: 40px; margin: 0 9px; border-left: 1px solid #F2F2F2; border-right: 1px solid #FFF; } 

You need to add an inner width to it, for example.

 .navbar .nav .divider-vertical{ width: 20px; background-image: url("img/nav-div.jpg"); } 

You will probably need to reduce the margins of the element to compensate for the added width (if you need .divider-vertical to remain 20px width).

Answer 2

This style pretty much worked for me:

 <style> .navbar-nav > li {border-right: 1px solid #666;} .navbar-nav {border-left: 1px solid #666;} </style> 

Magically covers the left and right borders of the main menu and the menu of the input area.