I have a bootstrap 4.1 navbar set up and I'm trying to ensure that my div "#pin_to_top" always stays at the top of the navbar. This way, on wider screens, it will be displayed as:
Logo - Menu - "#pin_to_top" (all in one row)
And on smaller devices, it should look like this:
Logo - "#pin_to_top"
Menu (with the menu positioned below my logo and div)
Any additional advice or feedback on my code would be greatly appreciated :)
.navbar-brand img {
height: 2rem;
}
.phonecall {
border-radius: 2rem;
background-color: #28a745;
font-weight: bold;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light d-flex flex-column flex-md-row navbar-expand">
<a class="navbar-brand" href="#">
<p>LOGO</p>
</a>
<div class="d-flex">
<ul class="navbar-nav flex-fill pl-md-5 text-nowrap">
<li class="nav-item "><a class="nav-link" href="#">Menu1</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu2</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu3</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu4</a></li>
</ul>
</div>
<div id="pin_to_top" class="ml-auto d-flex flex-column flex-md-row align-self-start" >
<div class="p-2">
<a class="">Some info here</a>
</div>
<div class="navbar-text text-nowrap phonecall px-2">
<a class="text-white" href="tel:+78005553535">+7-(800)-555-35-35</a>
</div>
</div>
</nav>