I'm making a page with bootstrap, and my question is:
How do I do so if I have a bootstrap element, and I want it to stay in a fixed position regardless of whether there is a scroll or not.
example:
<head>
<title> Take a note </title>
<link rel="stylesheet" href="css/lateral.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"> </script>
</head>
<body>
<!-- barra de arriba -->
<div class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light barra">
<a class="navbar-brand" href="#">Takeanote</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
<div>
<p style="position:relative;padding-right:5px;">imagen</p>
</div>
<div>
<p style="position:relative;padding-right:0px;">usuario</p>
</div>
</nav>
</div>
<!-- panel lateral -->
<div class="sidenav">
<a href="#">Mis Apuntes</a>
<a href="#">Favoritos</a>
</br>
<a href="#">Apuntes</a>
<a href="#">Documentos</a>
<a href="#">Ejercicios</a>
<a href="#">Practicas</a>
</div>
<!-- campo normal, el contenido vamos -->
<div style="padding-left: 10%" class="sticky-top">
<div style="margin-top: 55px;position:sticky;">
<nav aria-label="breadcrumb " >
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ULL</a></li>
<li class="breadcrumb-item"><a href="#">Informatica</a></li>
<li class="breadcrumb-item active" aria-current="page">Sistemas Operativos</li>
</ol>
</nav>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">tipo de archivo</th>
<th scope="col">usuario</th>
<th scope="col">valoracion</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tema1.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>1138</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>papadomcmenu</td>
<td>996</td>
</tr>
<tr>
<td>Bash1</td>
<td>practica</td>
<td>santikiller32</td>
<td>660</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>600</td>
</tr>
<tr>
<td>bash2</td>
<td>practica</td>
<td>Tostadorav2</td>
<td>540</td>
</tr>
<tr>
<td>Tema1.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>1138</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>papadomcmenu</td>
<td>996</td>
</tr>
<tr>
<td>Bash1</td>
<td>practica</td>
<td>santikiller32</td>
<td>660</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>600</td>
</tr>
<tr>
<td>bash2</td>
<td>practica</td>
<td>Tostadorav2</td>
<td>540</td>
</tr>
<tr>
<td>Tema1.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>1138</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>papadomcmenu</td>
<td>996</td>
</tr>
<tr>
<td>Bash1</td>
<td>practica</td>
<td>santikiller32</td>
<td>660</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>600</td>
</tr>
<tr>
<td>bash2</td>
<td>practica</td>
<td>Tostadorav2</td>
<td>540</td>
</tr>
<tr>
<td>Tema1.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>1138</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>papadomcmenu</td>
<td>996</td>
</tr>
<tr>
<td>Bash1</td>
<td>practica</td>
<td>santikiller32</td>
<td>660</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>600</td>
</tr>
<tr>
<td>bash2</td>
<td>practica</td>
<td>Tostadorav2</td>
<td>540</td>
</tr>
<tr>
<td>Tema1.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>1138</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>papadomcmenu</td>
<td>996</td>
</tr>
<tr>
<td>Bash1</td>
<td>practica</td>
<td>santikiller32</td>
<td>660</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>600</td>
</tr>
<tr>
<td>bash2</td>
<td>practica</td>
<td>Tostadorav2</td>
<td>540</td>
</tr>
<tr>
<td>Tema1.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>1138</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>papadomcmenu</td>
<td>996</td>
</tr>
<tr>
<td>Bash1</td>
<td>practica</td>
<td>santikiller32</td>
<td>660</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>600</td>
</tr>
<tr>
<td>bash2</td>
<td>practica</td>
<td>Tostadorav2</td>
<td>540</td>
</tr>
<tr>
<td>Tema1.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>1138</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>papadomcmenu</td>
<td>996</td>
</tr>
<tr>
<td>Bash1</td>
<td>practica</td>
<td>santikiller32</td>
<td>660</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>600</td>
</tr>
<tr>
<td>bash2</td>
<td>practica</td>
<td>Tostadorav2</td>
<td>540</td>
</tr>
<tr>
<td>Tema1.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>1138</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>papadomcmenu</td>
<td>996</td>
</tr>
<tr>
<td>Bash1</td>
<td>practica</td>
<td>santikiller32</td>
<td>660</td>
</tr>
<tr>
<td>Tema2.pdf</td>
<td>apunte</td>
<td>k1k4ss0</td>
<td>600</td>
</tr>
<tr>
<td>bash2</td>
<td>practica</td>
<td>Tostadorav2</td>
<td>540</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</body>
</html>
I have two horizontal navigation bars and I need them to be static and the entries do scroll
CSS:
body {
font-family: "Lato", sans-serif;
}
.barra{
padding-top: 0%;
position: fixed;
}
/* panel lateral */
.sidenav {
height: 100%;
width: 10%;
position: fixed;
left: 0;
background-color: #1111;
overflow-x: hidden;
padding-top: 10px;
}
/* las letras dentro del panel */
.sidenav a {
padding-left:10%;
padding-top:5px;
text-decoration: none;
font-size: 17px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
width:match-parent;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
You need to add the class
.fixed-topto the horizontal secondnavso that what you want is applied.It was also necessary that you add
margin-top: 55px;to it so that it would not be just below the firstnav. You already had it and it's correct.I hope it's what you need.