Struggling to adjust the alignment of the text in the navbar items using Bootstrap 4? My initial thought was to align them at the bottom of the ul and then position the ul accordingly, but I'm facing challenges with both. The objective is to have the text roughly at the same height as the brand logo:
https://i.sstatic.net/2ZafH.png
I've come across some solutions, but most are for Bootstrap 3 or fail to work for reasons unbeknownst to me.
Here is a snippet of HTML code:
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
<a class="navbar-brand" style="font-family: sans-serif; font-weight: 800; font-style: italic; font-size:xx-large;">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<p style="vertical-align:bottom;" >Test</p>
</li>
<li class="nav-item<?php addActiveClass('/index.php'); ?>">
<a class="nav-link" href="index.php">Test</a>
</li>
<li class="nav-item d-none d-md-block"><img src="" id="profileImage" height="40" width="40" style="margin-right: 10px; border-radius: 5px;"></li>
</ul>
</div>
Using this bootstrap theme and the following CSS example:
.navbar
{
padding:0rem 0.75rem;
}
.navbar-brand
{
padding: 0;
margin:0;
}
.navbar-nav > li
{
line-height: 36px;
padding: 0;
margin: 0;
background: red;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
background: red;
vertical-align: bottom;
}
.navbar-nav > li > p
{
padding: 0;
margin: 0;
background: yellow;
vertical-align: bottom;
}
For a complete example, check out the link below: https://jsfiddle.net/d6n5z3gb/8/