After some online research, I discovered a method to create a two-row Bootstrap navbar with the navbar-brand on its own row:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e2e35323533203101756f746f72">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3e243f2439">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-light flex-column align-items-stretch">
<div class="d-flex">
<a href="#" class="navbar-brand mx-sm-auto mr-auto text-dark">My website</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
</div>
<div class="container">
<div class="navbar-collapse collapse" id="navbarContent">
<div class="navbar-nav nav-fill px-lg-5 mx-lg-5">
<a href="#" class="nav-item nav-link ">Link here</a>
<a href="#" class="nav-item nav-link ">Link here</a>
<a href="#" class="nav-item nav-link ">Link here</a>
<a href="#" class="nav-item nav-link ">Link here</a>
</div>
</div>
</div>
</nav>(For the full effect, view it as a full page as it collapses on smaller screens)
Now that I have successfully implemented this layout, there are two specific goals I want to achieve:
- Adding two scalable images on either side of the navbar-brand, with the same height as the navbar-brand (plus a margin for aesthetic purposes)
- Ensuring the text of the navbar-brand scales with the window size. Setting a max font size like 300%, but allowing it to scale as the window width decreases
I have begun incorporating responsive font sizes for different window widths through Bootstrap breakpoints (see code below, although it might not display correctly here due to possible conflicts or restrictions with the code snippet tool)
It would be beneficial if the scaling transition was gradual instead of abrupt at the breakpoints. Additionally, I am uncertain about how to handle the image scaling to match the text height, as my knowledge of flexboxes is limited. I have attempted to research this but found it confusing. Currently, I can only think of setting a fixed height for the images.
Here is the progress I have made so far:
.navbar-brand {
font-size: 100%
}
.navbar img {
height: 100px;
}
@include media-breakpoint-up(md) {
.navbar-brand {
font-size: 250%;
}
}
@include media-breakpoint-up(lg) {
.navbar-brand {
font-size: 300%;
}
}<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6e746f7469">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060140e150e13">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-light flex-column align-items-stretch">
<div class="d-flex">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png">
<a href="#" class="navbar-brand mx-sm-auto mr-auto text-dark">My website</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
</div>
<div class="container">
<div class="navbar-collapse collapse" id="navbarContent">
<div class="navbar-nav nav-fill px-lg-5 mx-lg-5">
<a href="#" class="nav-item nav-link ">Link here</a>
<a href="#" class="nav-item nav-link ">Link here</a>
<a href="#" class="nav-item nav-link ">Link here</a>
<a href="#" class="nav-item nav-link ">Link here</a>
</div>
</div>
</div>
</nav>