CSS:
.show-mobile {
display: block;
box-shadow: 0px 2px 5px rgb(black, .2);
> div {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
button {
border: 0;
background: transparent;
}
}
}
.hide-mobile {
display: none;
box-shadow: 0px 2px 5px rgb(black, .2);
> div {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
margin-right: 1em;
}
nav {
display: flex;
align-items: center;
ul {
display: flex;
list-style: none;
a {
margin: 0 .2em;
color: inherit;
text-decoration: none;
}
}
}
.info {
display: flex;
align-items: center;
.account {
margin-right: .5em;
}
}
}
/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}
/* Large and up */
@media screen and (min-width: 64em) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}
HTML:
<div class="show-mobile">
<div>
<button>
<img src="./assets/svg/icon_menu.svg" alt="menu">
</button>
<a href="">
<img src="./assets/svg/logo_yard_sale.svg" alt="logo">
</a>
<a href="">
<img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
</a>
</div>
</div>
<div class="hide-mobile">
<div>
<nav>
<a class="logo" href="">
<img src="./assets/svg/logo_yard_sale.svg" alt="logo">
</a>
<ul>
<li><a href="">All</a></li>
<li><a href="">Clothes</a></li>
<li><a href="">Electronics</a></li>
</ul>
</nav>
<div class="info">
<div class="account">[email protected]</div>
<div>
<a href="">
<img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
</a>
</div>
</div>
</div>
</div>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?