user441521 user441521 -3 years ago 67
CSS Question

css to line up this notification icon

I'm trying to get the notification icon with the badge on the same row as the drop down menu on the right and the header on the left. I'm also looking to have the notification icon with badge just to the left of the Action menu on the right. Not sure how to get that working correctly.

https://jsfiddle.net/DTcHh/33742/

<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Reclamation</a>
</div>

<div style="display: inline-block;">
<button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
<span class="glyphicon glyphicon-comment"></span>
</button>
<span class="badge badge-notify">3</span>
</div>

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Actions <span class="caret"></span></a>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
</div>
</div>
</nav>

Answer Source

You were really close, I just moved your notification icon down in the HTML, and then added the class pull-right to it since you are using bootstrap.

See my fiddle.

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Reclamation</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Actions <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                    </ul>
                </li>
            </ul>

        <div class="pull-right" style="display: inline-block;">
            <button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
                <span class="glyphicon glyphicon-comment"></span>
            </button>
            <span class="badge badge-notify">3</span>
        </div>

        </div>
    </div>
</nav>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download