I have the following design currently:
var totalWidth = 0;
$('.nav-item').each(function(index) {
totalWidth += parseInt($(this).width(), 10);
});
$('.nav-item').css('padding-left', ($('.navbar-nav').width() - totalWidth) / 10);
$('.nav-item').css('padding-right', ($('.navbar-nav').width() - totalWidth) / 10);.navbar {
background-color: rgb(188 174 159);
font-family: source-serif-pro, serif;
font-weight: 700;
font-style: normal;
border-bottom: 3px solid white;
font-size: 22px;
padding-bottom: 0.7vw;
padding-top: 0.7vw;
max-height: 9vh;
}
.navbar-brand img {
height: 7.5vh;
}
.navbar-nav {
display: flex;
justify-content: space-between;
width: 100%;
margin-left: 1rem;
}
.nav-item {
font-size: 2vw;
background-color: #e4dbd1 !important;
display: flex;
height: calc(9vh - 3px);
}
.nav-link {
color: #731d2c !important;
display: flex;
align-self: center;
}
.nav-link.active {
color: #94253d !important;
}
.nav-item:hover {
background-color: #e4dbd1 !important;
}
@media screen and (min-width: 1200px) {
.nav-item {
font-size: 25px;
}
}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="img/logo.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="timeline.html">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="essays.html">Short Essays</a>
</li>
<li class="nav-item">
<a class="nav-link" href="bibliography.html">Bibliography</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</div>
</nav>The lighter colour is what the intended hover effect will be.
At the moment I am using:
display: flex;
justify-content: space-between;
in order to create the spacing between the elements. This gives me even spacing which is ideal, however the lighter colour does not cover this areas as it is done via a margin.
I am wondering if this is possible to achieve via padding. I tried width 20% since there are 5 elements and 5x20%=100%, however it was odd having a 3 letter word like "Map" take up as much space as "Short Essays" which is much longer.
Any suggestions on how to achieve this would be ideal.
UPDATE: I was able to achieve a solution using Javascript/Jquery as follows:
var totalWidth = 0;
$('.nav-item').each(function(index) {
totalWidth += parseInt($(this).width(), 10);
});
$('.nav-item').css('padding-left', ($('.navbar-nav').width() - totalWidth)/10);
$('.nav-item').css('padding-right', ($('.navbar-nav').width() - totalWidth)/10);