Tengo un diseño con una barra de navegación y 4 divs. Los primeros div son recortados por la barra de navegación. Alguien sabe que puedo hacer?
<body>
<div id="app" class="flex-container">
<nav class="navbar default-layout p-0 fixed-top d-flex flex-row" style="height: 63px;">
<select id="region" onchange="initProcess();" style="position:absolute;background:#eaeaea;">
</select>
<div style="width: calc(100% - 74px); padding-left: 74px; left: 0; text-align: center; color: #fff">
<img src="images/co-logo.png" style="width: 100px; margin-top: -6px">
<h4>Dashboards</h4>
</div>
<div class="navbar-menu-wrapper d-flex align-items-right">
<button class="navbar-toggler navbar-toggler-right d-lg-none align-self-right" type="button" data-toggle="offcanvas">
<span class="mdi mdi-menu"></span>
</button>
</div>
</nav>
<div class="flex-item" style="background-color:red"></div>
<div class="flex-item" style="background-color:blue"></div>
<div class="flex-item" style="background-color:yellow"></div>
<div class="flex-item" style="background-color:grey"></div>
</div>
</body>
3
9 may. 2019 a las 18:03
3 respuestas
La mejor respuesta
Puede agregar fácilmente la propiedad css padding-top igual a la altura de la barra de navegación. en tu caso será:
.flex-container {
padding-top: 63px;
}
2
9 may. 2019 a las 15:08
Como la barra de navegación está configurada en position:fixed, ignora el flujo normal de elementos. Otros elementos se alinean debajo de él debido a esto. En este caso, simplemente agregue margin-top: 63px; al primer elemento y estará listo (el 63px tiene exactamente la misma altura que su barra de navegación).
1
9 may. 2019 a las 15:20
Este CSS funcionará en su caso:
body {
margin: 0;
padding: 0;
}
.flex-container {
position: relative;
padding-top: 100px;
}
.navbar {
position: fixed;
top: 0;
background: purple;
z-index: 1;
width: 100%;
}
.flex-item {
width: 100%;
height: 60px;
}
.flex-container .flex-item:first-of-type {
position: absolute;
top: 50px;
width: 100%;
height: 50px;
}
1
9 may. 2019 a las 15:55