Bootstrap Styling Cart within Navbar

Question

I'm trying to style my Cart within the Navbar like below.

I figured I'd have to make it's own UL with something like "navbar-cart" instead of "navbar-nav" however I was having trouble.

The best success I've had was:

.navbar-cart {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
background-color: #4c4c4c;
}

.navbar-default .navbar-cart > a,
.navbar-default .navbar-cart > a:focus,
.navbar-default .navbar-cart > a:active {
font-size: 14px;
text-align: left;
color: #fff;
line-height: 1.3;
padding: 0px;
background-color: transparent;
text-decoration: none;
}

.navbar-default .navbar-cart > a:hover {
text-align: left;
color: #fff;
background-color: transparent;
}

I was still unable to get cart icon ( with font awesome ) in there nicely... let alone make entire div a dropdown.

Answer 1

I just had to implement the same thing on a website and I kind of like it, need a little bit of tuning on appearance but it works. It uses bootstraps popover. Stuff is written in portuguese but you should understand it. Also the total value of the cart is blade templated.

Navbar code:

<ul class="nav navbar-nav navbar-right">
 ...some other li's...
          <li>
             <a id="cart-popover" class="btn" data-placement="bottom" title="Carrinho de Compras">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                 {{ $cart_total == 0 ? "Nada no carrinho!" : ("R$ " . number_format($cart_total, 2, ',', '.'))   }}
                </a>
            </li>
        </ul>

Js to set the content of the popover:

$(document).ready(function() {
 $('#cart-popover').popover({
    html : true,
    container: 'body',
    content: function() {
        return $('#popover_content_wrapper').html();
    }
 });
});

#popover_content_wrapper is a div with the content of the popover, it has the hidden class so it doesn't show in the page, it's just a normal bootstrap panel.

This is what I get:

.

jsfiddle: https://jsfiddle.net/DTcHh/5011/