Tengo esta porción de código que he hecho y la verdad la veo bien, pero tengo unos problemitas. Los Cards no se ponen detrás del navbar cuando esta queda fija y tampoco detrás de menú.
He aislado el problema y se da por las posiciones de las cards, he comentado algo sobre las lineas del CSS para que vean donde esta el problema.
let nav = document.querySelector("nav");
window.addEventListener("scroll", ()=> {
if(document.documentElement.scrollTop > 20){
nav.classList.add("sticky");
}else{
nav.classList.remove("sticky");
}
})
const body = document.querySelector("body"),
openMenu = document.querySelector(".openMenu"),
closeMenu = document.querySelector("closeMenu");
openMenu.addEventListener("click", ()=> {
nav.classList.add("active");
});
body.addEventListener("click", e =>{
let clicked = e.target;
if (!clicked.classList.contains("openMenu") && !clicked.classList.contains("menu")) {
nav.classList.remove("active");
}
});
/* ===== Google Font Import - Poppins ===== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");
:root {
/* ===== Colors ===== */
--primary-color: #0177DE;
--secondary-color: #045dac;
--text-dark-color: #333;
/* ====== Transition ====== */
--tran-05: all 0.5s ease;
--tran-03: all 0.3s ease;
--tran-02: all 0.2s ease;
}
/* Tablets */
@media (max-width: 1245px){
.profile-card{
width: calc(50% - 10px);
margin-bottom: 25px;
}
}
@media (max-width: 800px) {
nav .nav-content .openMenu{
display: inline-block !important;
}
.menu{
position: fixed;
height: 100%;
width: 50%;
left: -100%;
top: 0;
padding: 20px;
background-color: #191919;
z-index: 100;
transition: var(--tran-05);
}
nav.active .menu{
left: 0%;
}
nav.active .nav-content .logo a{
font-size: 1.5rem !important;
color: white;
}
nav.active .nav-content .navLogo{
opacity: 0;
transition: var(--tran-03);
}
.logo-toggle .logo{
width: 100%;
display: flex !important;
align-items: center;
justify-content: space-between;
}
.nav-content .logo a{
font-size: 1.5rem !important;
}
.logo-toggle .closeMenu{
color: white;
font-size: 1rem;
cursor: pointer;
}
.nav-content .nav-links{
flex-direction: column;
}
.nav-links li a{
display: block;
margin-top: 20px;
color: white !important;
}
.nav-links li a::before{
background-color: white !important;
}
.container{
flex-wrap: wrap;
}
.profile-card{
max-width: 90% !important;
margin-right: 0px !important;
margin-bottom: 25px;
}
}
/* Movil */
@media (max-width: 500px) {
nav .nav-content .openMenu{
display: inline-block !important;
}
.menu{
width: 60%;
}
nav.active .menu{
left: 0%;
}
nav.active .nav-content .logo a{
font-size: 1.1rem !important;
}
nav.active .nav-content .navLogo{
opacity: 0;
transition: var(--tran-03);
}
.logo-toggle .logo{
width: 100%;
display: flex !important;
align-items: center;
justify-content: space-between;
}
.logo-toggle .closeMenu{
color: white;
font-size: 1rem;
cursor: pointer;
}
.nav-content .nav-links{
flex-direction: column;
}
.nav-links li a{
display: block;
margin-top: 20px;
}
.container{
flex-wrap: wrap;
}
.profile-card{
max-width: 90% !important;
margin-right: 0px !important;
margin-bottom: 25px;
}
}
/********** Navbar **********/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
text-decoration: none;
}
body{
margin: 0;
padding: 100px 0 0 0;
}
nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px;
transition: var(--tran-03);
}
nav.sticky{
padding: 15px 20px;
background-color: var(--primary-color);
}
nav .nav-content{
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
margin: auto;
}
nav .nav-content .openMenu{
color: var(--primary-color);
font-size: 25px;
padding: 5px;
cursor: pointer;
display: none;
}
.nav-content .logo a{
font-size: 2rem;
font-weight: 500;
color: var(--primary-color);
}
.logo-toggle .logo{
display: none;
}
nav.sticky .nav-content .openMenu{
color: white;
}
nav.sticky .nav-content .logo a{
color: white;
}
.nav-content .nav-links{
display: flex;
align-items: center;
}
.nav-content .nav-links li{
list-style: none;
margin: 0 8px;
}
.nav-links li a{
position: relative;
font-size: 1rem;
font-weight: 500;
color: var(--text-dark-color);
padding: 10px 4px;
transition: var(--tran-04);
}
.nav-links li a::before{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(50%);
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--text-dark-color);
opacity: 0;
transition: var(--tran-03);
}
.nav-links li:hover a::before{
opacity: 1;
background-color: var(--primary-color);
}
.nav-links li a:hover{
color: var(--primary-color);
}
nav.sticky .nav-links li a{
color: white;
}
nav.sticky .nav-links li:hover a::before{
opacity: 1;
background-color: var(--text-dark-color);
}
nav.sticky .nav-links li a:hover{
color: var(--text-dark-color);
}
/********** Cards **********/
.container{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.profile-card{
display: flex;
flex-direction: column;
align-items: center;
max-width: 370px;
width: 100%;
background-color: white;
border-radius: 24px;
padding: 25px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Sin relative, no aparece */
position: relative;
margin-right: 25px;
}
.profile-card::before{
content: '';
/* Sin absolute, no aparece */
position: absolute;
top: 0;
left: 0;
height: 36%;
width: 100%;
border-radius: 24px 24px 0 0;
background-color: var(--primary-color);
}
.image{
/* Sin relative, se queda atras */
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
background-color: var(--primary-color);
padding: 3px;
margin-bottom: 10px;
}
.image .profile-img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 3px solid white;
}
.profile-card .text-data {
display: flex;
flex-direction: column;
align-items: center;
color: var(--text-dark-color);
}
.text-data .name{
font-size: 22px;
font-weight: 500;
}
.text-data .job{
font-size: 15px;
font-weight: 400;
}
.profile-card .media-buttons{
display: flex;
align-items: center;
margin-top: 15px;
}
.media-buttons .links{
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
height: 34px;
width: 34px;
border-radius: 50%;
margin: 0 8px;
background-color: var(--primary-color);
text-decoration: none;
}
.profile-card .buttons{
display: flex;
align-items: center;
margin-top: 25px;
}
.buttons .button{
color: white;
font-size: 15px;
font-weight: 400;
border: none;
border-radius: 24px;
margin: 0 10px;
padding: 8px 24px;
background-color: var(--primary-color);
cursor: pointer;
transition: var(--tran-03);
}
.buttons .button:hover{
background-color: var(--secondary-color);
}
.profile-card .analytics{
display: flex;
align-items: center;
margin-top: 25px;
}
.analytics .data{
display: flex;
align-items: center;
color: var(--text-dark-color);
padding: 0 20px;
border-right: 2px solid #e7e7e7;
}
.data i{
font-size: 18px;
margin-right: 6px;
}
.data:last-child{
border-right: none;
}
<script src="https://kit.fontawesome.com/8db5c68b69.js"></script>
<nav>
<div class="nav-content">
<div class="logo navLogo">
<i class="fa-solid fa-bars openMenu"></i>
<a href="/">Users</a>
</div>
<div class="menu">
<div class="logo-toggle">
<div class="logo">
<a href="/">Users</a>
<i class="fa-solid fa-xmark closeMenu"></i>
</div>
</div>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="login">Login</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Others</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="profile-card">
<div class="image">
<img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d" alt="imgProfile" class="profile-img">
</div>
<div class="text-data">
<span class="name">User Name</span>
<span class="job">Title or Job's User</span>
</div>
<div class="media-buttons">
<a href="#" style="background: #4267b2;" class="links">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" style="background: #e1306c;" class="links">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" style="background: #d71e18;" class="links">
<i class="fa-brands fa-youtube"></i>
</a>
<a href="#" style="background: #1da1f2;" class="links">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" style="background: #000;" class="links">
<i class="fa-brands fa-tiktok"></i>
</a>
<a href="#" style="background: #25d366;" class="links">
<i class="fa-brands fa-whatsapp"></i>
</a>
<a href="#" style="background: #0e76a8;" class="links">
<i class="fa-brands fa-linkedin-in"></i>
</a>
<a href="#" style="background: #6699ff;" class="links">
<i class="fa-solid fa-globe"></i>
</a>
</div>
<div class="buttons">
<button class="button">
Subscribe
</button>
<button class="button">
Message
</button>
</div>
<div class="analytics">
<div class="data">
<i class="fa-regular fa-heart"></i>
<span class="number">
25k
</span>
</div>
<div class="data">
<i class="fa-regular fa-comment"></i>
<span class="number">
63k
</span>
</div>
<div class="data">
<i class="uil uil-share"></i>
<span class="number">
81k
</span>
</div>
</div>
</div>
<div class="profile-card">
<div class="image">
<img src="https://www.growcropsonline.com/assets/img/agent-2.jpg" alt="imgProfile" class="profile-img">
</div>
<div class="text-data">
<span class="name">User Name</span>
<span class="job">Title or Job's User</span>
</div>
<div class="media-buttons">
<a href="#" style="background: #4267b2;" class="links">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" style="background: #e1306c;" class="links">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" style="background: #d71e18;" class="links">
<i class="fa-brands fa-youtube"></i>
</a>
<a href="#" style="background: #1da1f2;" class="links">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" style="background: #000;" class="links">
<i class="fa-brands fa-tiktok"></i>
</a>
</div>
<div class="buttons">
<button class="button">
Subscribe
</button>
<button class="button">
Message
</button>
</div>
<div class="analytics">
<div class="data">
<i class="fa-regular fa-heart"></i>
<span class="number">
25k
</span>
</div>
<div class="data">
<i class="fa-regular fa-comment"></i>
<span class="number">
63k
</span>
</div>
<div class="data">
<i class="uil uil-share"></i>
<span class="number">
81k
</span>
</div>
</div>
</div>
<div class="profile-card">
<div class="image">
<img src="https://www.electricallicenserenewal.com/app-assets/images/user/12.jpg" alt="imgProfile" class="profile-img">
</div>
<div class="text-data">
<span class="name">User Name</span>
<span class="job">Title or Job's User</span>
</div>
<div class="media-buttons">
<a href="#" style="background: #4267b2;" class="links">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" style="background: #e1306c;" class="links">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" style="background: #d71e18;" class="links">
<i class="fa-brands fa-youtube"></i>
</a>
<a href="#" style="background: #1da1f2;" class="links">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" style="background: #000;" class="links">
<i class="fa-brands fa-tiktok"></i>
</a>
</div>
<div class="buttons">
<button class="button">
Subscribe
</button>
<button class="button">
Message
</button>
</div>
<div class="analytics">
<div class="data">
<i class="fa-regular fa-heart"></i>
<span class="number">
25k
</span>
</div>
<div class="data">
<i class="fa-regular fa-comment"></i>
<span class="number">
63k
</span>
</div>
<div class="data">
<i class="uil uil-share"></i>
<span class="number">
81k
</span>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
He leido este post y aunque su aporte es enorme, no logro entender porque se comporta así, he hecho cambios y he buscado de muchas maneras pero ya no puedo seguir, y por eso vengo.
Tambien tengo un pequeño "algo" que no me gusta, cuando cierro el menu, cambia las letras al color azul que tiene normalmente, he manipulado esas clases y la verdad es que no logro quitar ese pequeño error.
PD: los <br>
son solo para tema de altura.
Puedo incluir en la pregunta las siguientes dudas?
El orden de las media querys (MQ) es el correcto?? CSS es secuencial, siempre he colocado las MQ al inicio, primero las grandes y luego las chicas (moviles) pero al ser secuencial, no se si las MQ deberian ir al final de todo.
En las MQ, he usado mucho el
! important
, eso es válido?? es que sin eso no acepta los estilos y queria saber si el abuso de eso no se veria como mala practica.
PD2: Solo la respuesta de la posicion de los cards sera tomada en cuenta para ser aceptada, las otras son uun extra, las pueden responder pero para conocimiento general.
Gracias a todos.