Krystyna Krystyna - 7 months ago 11
HTML Question

Bootstrap navbar not positioning some elements inside correctly

I am having trouble with positioning some navbar elements inside a bootstrap 3 container based navbar.

I have attached an image, which should display how I would like my navbar to be:

navbar

I have the text logo on the left which displays fine, and the user dropdown menu on the right which is also fine.

I am not sure how to include a searchbox with its icon in that position displayed in the image and why the 'bell' hover state and its dropdown list in my code does not display flush with the bottom border of the navbar??

The user dropdown to the right also does not display its height flush with the bottom navbar as well, there is like 1px difference there...

If there is minimal code that can fix this to ensure it works compatibly in other browsers too.

The bell icon at the moment in my code is just a placeholder because I need to display an image of a custom bell icon, but not sure exactly how to do the little notification at the top of it either, but yeah :/

Anyhow, thanks.

Here is my code:



body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 180px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
.glyphicon-bell {
font-size: 40px;
}
.user {
margin-left: 30px;
margin-right: 10px;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<body>

<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<a class="navbar-brand navbar-left" href="#">BRAND LOGO TEXT HERE</a>

<ul class="nav navbar-nav navbar-right">

</ul>

<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square"><span class="label label-info">32</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a>
</li>
<li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a>
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a>
</li>
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Username here</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li><a href="#">Action</a>
</li>
<li class="divider"></li>
<li><a href="#">Another action</a>
</li>
<li class="divider"></li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>

</div>
</nav>

<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhsk</p>

</div>
</div>
</div>

</body>
</html>




Answer

The problem is that the li tag with class dropdown containing the bell icon as well as the other one are of different height which causes the misalignment. So, I am using flexbox to fix the alignment (as it is the simplest solution to it). To get the red notification at the top I am using position as absolute, and setting top: 12px(You can play around with top, left, right to position the notification according to your wish). Just add the following styles at the end of your css file to view the changes

li.dropdown {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.user {
    margin-left: 11px;
    margin-right: 85px;
}
.label {
    position: absolute;
    top: 12px;
}
.navbar-default .navbar-nav>li>a {
    color: #777;
    padding: 10px 19px;
}
#search-container {
    width: 300px;
}

And for the search bar, add the following li tag before the li containing the bell icon

<li class="dropdown">
      <div class="input-group" id="search-container" >
        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
      </div>
</li>

Heres my JSBin code for the same. See the output there. I hope it helps! Ask if you don't understand anything.