My navigation bar is functioning properly with single-line items, but encounters alignment issues when dealing with multi-line items:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link profile" href="#">
<div class="profile-info">
<span class="name">Артём</span>
</div>
</a>
</li>
</ul>
</div>
https://i.sstatic.net/KLXVh.png
The issue arises when an item spans multiple lines, causing other items to lose vertical center alignment and align to the top instead:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link profile" href="#">
<div class="profile-info">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</div>
</a>
</li>
</ul>
</div>
https://i.sstatic.net/wC88T.png
The SASS code responsible for styling the navigation bar:
#site-header {
background: #2d3840;
border-bottom: solid 1px #20272d;
height: 83px;
.navbar-brand {
color: white;
}
.nav-item {
&:not(:first-child) {
margin-left: 25px;
}
&:not(:last-child) {
margin-right: 25px;
}
// Styling for general links
a.nav-link {
color: white;
font-size: 16px;
text-align: center;
@include transition(0.5s);
&:hover {
@include transition(0.3s);
color: $color-accent;
}
&.active {
padding: 6px 21px 6px 21px;
background: $color-accent;
border-radius: 17.5px;
box-shadow: 0 2px 10px 0 rgba(90, 175, 238, 0.6);
&:hover {
color: white;
box-shadow: none;
}
}
// Styling for user profile link
&.profile {
.profile-info {
display: inline-block;
.name {
display: block;
font-weight: bold;
}
.balance {
display: block;
font-size: 16px;
font-weight: bold;
color: $color-accent;
}
}
}
}
}
}
The desired outcome for the navigation bar can be observed in this image:
https://i.sstatic.net/tH2YY.png
If you know how to maintain center alignment for multi-line items, please share your insights.