I am designing my web page, and I added a toggler with bootstrap to the nav bar, after positioning it as I wanted, which is like this:
When you open it, it looks like this:
I don't know why this happens, the CSS for positioning is as follows:
@media(max-width:990px){
.button-margin{ /* Separacion entre los botones */
margin-right:90px;
}
.navbar-light .navbar-toggler{ /* Posicionamiento absoluto del toggler */
position: absolute;
right: 20px;
}
#button-styles{ /* Posicionamiento de botones al lado del toggler */
position: absolute;
right: 110px;
}
}
And here I attach the navbar:
<nav class="margenes navbar navbar-expand-lg navbar-light" style="background-color: #cfeafd;">
<a class="navbar-brand" href="#">Veterinaria</a>
<button class="toggler navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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="margen-down navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active white" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Veterinari@s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dueñ@s</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Adopta</a>
</li>
<div class="separador"></div>
</ul>
</div>
How can I make the buttons stay on top when I press the toggler, that is, they don't move?
Thank you very much
If you want all the buttons on the right you can wrap them in a
div
. henav
hasjustify-content: space-between
. So when you use thediv
, thenav
has two elements. Not four. And the elements in thediv
will go to the right.Update : Added some css for the buttons. Now the buttons stay on the top right.
A different option: I think it's more correct to use Bootstrap's class names to achieve what you want. With
navbar-right
andbtn-nav
. Note: Buttons appear in the list on small screens.