In the process of creating a responsive navbar with Bootstrap, I encountered an issue. When resizing the window to a smaller size, the collapse icon shifts from the top right position below my "logo".
Here is how the site appears on a regular screen: https://i.stack.imgur.com/CYtzm.png
This is the view on a mobile screen: https://i.stack.imgur.com/BYnBS.png
My desired layout involves breaking the line before moving the collapse button beneath itself:
https://i.stack.imgur.com/rUBw2.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-4 py-md-5 px-sm-4 px-md-5" style="background-color: aquamarine">
<div id="navbar-logo" class="logo ml-2" style="font-size: 20px; letter-spacing: 10px;">
PRENAME SURNAME
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="toogleMenuBackground()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse pt-3 pt-md-4 pt-lg-0" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">home</a>
</li>
<li class="nav-item">
<a class="nav-link">about</a>
</li>
<li class="nav-item">
<a class="nav-link">more</a>
</li>
<li class="nav-item">
<a class="nav-link">content</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
You can find the above HTML code on Codepen