estoy teniendo un problema y es que al hacer un header fijo me encuentro con que el resto del texto de la página se monta encima de la cabecera y resulta muy molesto porque no consigo resolverlo.
body{
background: fixed;
}
#container-cabecera{
margin-top: 10px;
}
#cabecera{
position: fixed;
width: 100%;
background-color: red;
min-width: 200px;
}
/* Esto lo estoy cambiando, no prestar atencion */
#intro{
min-width: 200px;
max-width: 1500px;
}
#extra{
min-width: 200px;
max-width: 1200px;
}
<!DOCTYPE html>
<html>
<head>
<title>RabiGames</title>
<meta charset="utf-8"/>
<!-- jQuery v1.11.1-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<!-- Bootstrap v4.4.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Archivos locales -->
<link rel="stylesheet" type="text/css" href="./css/estilos.css" />
<script type="text/javascript" src="./js/movimientos.js"></script>
</head>
<body>
<!-- Cabecera fija de la pagina, debe mantenerse intacta y el cuerpo de la página debe pasar por debajo de la cabecera -->
<div class="container-fluid" id="container-cabecera">
<div class="row" id="cabecera">
<div class="col-sm">
RabiGames1
</div>
<div class="col-sm">
RabiGames2
</div>
<div class="col-sm">
RabiGames3
</div>
</div>
</div>
<!-- Cuerpo de la página que debe pasar por ddebajo de la cabecera -->
<div class="container">
<div class="row">
<div class="col-sm-9" id="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor
justo non urna molestie, vitae lobortis dui fermentum. Morbi sed
aliquam nibh. Cras a purus lorem. Maecenas sit amet lorem tincidunt,
lobortis ipsum vel, rhoncus diam. Duis dapibus quis massa eu auctor.
Nam ut diam mattis, luctus quam quis, porta nunc. In nec sagittis
orci, non facilisis ipsum. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia curae; Suspendisse blandit,
risus sit amet congue sollicitudin, quam eros ultricies sapien, maximus
convallis lectus metus in libero. Etiam odio nibh, facilisis sit amet
aliquam nec, hendrerit id nunc. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Nam vitae aliquet erat, et auctor neque.</p>
</div>
<div class="col-sm-3" id="extra">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor
justo non urna molestie, vitae lobortis dui fermentum. Morbi sed
aliquam nibh. Cras a purus lorem. Maecenas sit amet lorem tincidunt,
lobortis ipsum vel, rhoncus diam. Duis dapibus quis massa eu auctor.
Nam ut diam mattis, luctus quam quis, porta nunc. In nec sagittis
orci, non facilisis ipsum. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia curae; Suspendisse blandit,
risus sit amet congue sollicitudin, quam eros ultricies sapien, maximus
convallis lectus metus in libero. Etiam odio nibh, facilisis sit amet
aliquam nec, hendrerit id nunc. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Nam vitae aliquet erat, et auctor neque.</p>
</div>
</div>
</div>
</body>
</html>
Como podéis ver se me sube encima de la parte roja y no tengo mucha idea de cómo hacer para que no lo haga. Lo que he pensado es en hacer que en la zona del texto de la página tenga un espacio en blanco en funcion de lo grande que sea él header pero me parece una solución muy cutre.
De antemano, gracias por la ayuda.
sticky-top
de Bootstrap?fixed-top
, con esto el elemento queda fijo en la posición superior de la página, mientras te desplazas por ella.