Hay varias formas de posicionar un elemento.
Voy agregar tres ejemplos: float
, position
y con Flex box (margin
).
Este ejemplo es simplemente con float: right
:
/*CODIGO CSS:*/
@media (max-width: 768px) {
/*Acá abajo se encuentra el botón*/
.nav-toggle {
display: block;
cursor: pointer;
float: right
}
/*Acá arriba se encuentra el botón*/
/*CODIGO HTML:*/
<div id="button-container">
<button class="nav-toggle" aria-label="Abrir Menú">
<i class="fa-solid fa-bars"></i>
</button>
Ahora un ejemplo con position
. La posición debe ser absoluto, luego la hubicación right: 0
. Si el botón es de posición absoluto, el contenedor button-container
debe ser de posición relative
:
@media (max-width: 768px) {
#button-container {
position: relative;
/* Para el demo */
width: 50%;
height: 300px;
margin: auto;
background-color: rgba(0,128,0, 0.5)
}
.nav-toggle {
display: block;
cursor: pointer;
position: absolute;
right: 0;
}
<div id="button-container">
<button class="nav-toggle" aria-label="Abrir Menú"><i class="fa-solid fa-bars"></i>Botón</button>
</div>
Este último y más usado es con el uso de Flex box.
El contenedor padre: button-container
debe tener display: flex
, y así poder acomodar el contenido a gusto: por ejemplo con margin: auto
juntamente con margin-right
.
@media (max-width: 768px) {
#button-container {
display: flex;
/* Para el demo */
width: 50%;
height: 300px;
margin: auto;
background-color: rgba(0,128,0, 0.5)
}
.nav-toggle {
display: block;
cursor: pointer;
margin: auto;
margin-right: 0
}
<div id="button-container">
<button class="nav-toggle" aria-label="Abrir Menú"><i class="fa-solid fa-bars"></i>Botón</button>
</div>