Tengo este panel administrativo y quiero colocar un menú lateral fijo de manera que cuando haga scroll
este se quede fijo, la clase fixed-top
en Botstrap
me permite hacerlo pero esta no funciona bien en menús laterales
body {
background: #f2f2f2;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
/* Barra Lateral*/
.barra-lateral {
background: #262a34;
color: #fff;
min-width: 300px;
min-height: 100vh;
padding: 0;
}
.barra-lateral a {
color: #fff;
}
/*logo*/
.barra-lateral .logo {
background: #0275db;
margin-bottom: 2px;
}
.barra-lateral .logo h2 {
font-size: 30px;
font-family: 'Roboto', sans-serif;
padding: 20px 0;
text-align: center;
font-weight: 300;
margin: 0;
}
/*menu*/
.barra-lateral .menu a {
display: block;
padding: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.barra-lateral .menu a:hover {
background: #35ae6b;
text-decoration: none;
-webkit-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
.barra-lateral .menu a li {
margin-right: 20px;
font-weight: normal;
}
/*MAIN*/
.main {
padding-top: 40px;
}
.main .columna {
padding-left: 40px;
padding-right: 40px;
}
.main .titulo {
color: #262a34;
font-size: 25px;
font-weight: 500;
font-family: 'Roboto', sans-serif;
margin-bottom: 20px;
}
.main .widget {
margin-bottom: 40px;
}
/*main nueva entrada*/
.main .widget form input[type="text"],
.main .widget form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
font-family: 'Open Sans', sans-serif;
border: none;
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.main .widget form input[type="text"] {
font-weight: 400;
}
.main .widget form textarea {
height: 400px;
min-height: 200px;
max-width: 100%;
min-width: 100%;
}
.main .widget form button {
background: #0275d8;
cursor: pointer;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 500;
border: none;
display: inline-block;
padding: 10px;
width: 200px;
border-radius: 3px;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.main .widget form button:hover {
background: #025aa5;
}
/*widget estadisticas*/
.main .estadisticas .contenedor {
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2);
}
.main .estadisticas .caja {
background: #fff;
border: 1px solid #e3e3e3;
padding: 40px 20px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
font-family: 'Roboto', sans-serif;
}
.main .estadisticas .caja h3 {
margin-bottom: 10px;
color: #35ae6b;
}
.main .estadisticas .caja p {
color: #a8a8a8;
margin-bottom: 0;
}
.main .estadisticas .caja:first-child {
border-right: none;
}
.main .estadisticas .caja:last-child {
border-left: none;
}
/*widget comentarios*/
.main .comentarios .contenedor {
-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}
.main .comentarios .comentario {
background: #fff;
padding: 20px;
border-bottom: 1px solid #dfdfdf;
}
.main .comentarios .comentario .foto {
width: 64px;
height: 64px;
overflow: hidden;
margin-right: 20px;
border-radius: 100px;
}
.main .comentarios .comentario .foto a {
display: inline-block;
}
.main .comentarios .comentario .foto img {
width: 100%;
}
.main .comentarios .comentario .texto {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.main .comentarios .comentario .texto .texto-comentario {
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
.main .comentarios .comentario .botones button {
background: none;
cursor: pointer;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
border: none;
display: inline-block;
padding: 5px 10px;
border-radius: 3px;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
margin-right: 10px;
margin-bottom: 10px;
}
.main .comentarios .comentario .botones .aprobar {
background: #35ae6b;
}
.main .comentarios .comentario .botones .eliminar {
background: #b74848;
}
.main .comentarios .comentario .botones .bloquear {
color: #acacac;
}
.main .comentarios .comentario .botones i {
margin-right: 10px;
}
.main .comentarios .comentario .botones .aprobar:hover {
background: #449d44;
}
.main .comentarios .comentario .botones .eliminar:hover {
background: #c9302c;
}
.main .comentarios .comentario .botones .bloquear:hover {
background: #acacac;
color: #fff;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="barra-lateral col-12 col-sm-auto ">
<div class="logo ">
<h2>Dashboard</h2>
</div>
<nav class="menu d-flex d-sm-block justify-content-center flex-wrap fixed-top">
<a href="#">
<li class="fa fa-home"></li><span>Inicio</span></a>
<a href="#">
<li class="fa fa-file-text"></li><span>Entradas</span></a>
<a href="#">
<li class="fa fa-users"></li><span>Usuarios</span></a>
<a href="#">
<li class="fa fa-cogs"></li><span>Configuracion</span></a>
<a href="#">
<li class="fa fa-sign-out"></li><span>Salir</span></a>
</nav>
</div>
<main class="main col">
<div class="row">
<div class="columna col-lg-7">
<div class="widget nueva_entrada">
<h3 class="titulo">Nueva Entrada</h3>
<form action="">
<input type="text" placeholder="titulo de la semana">
<textarea placeholder="Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, quaerat."></textarea>
<div class="d-flex justify-content-end">
<button>
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Enviar
</button>
</div>
</form>
</div>
</div>
<div class="columna col-lg-5">
<div class="widget estadisticas">
<h3 class="titulo">Estadisticas</h3>
<div class="contenedor d-flex flex-wrap">
<div class="caja">
<h3>15.236</h3>
<p>Visitas</p>
</div>
<div class="caja">
<h3>1.831</h3>
<p>Registros</p>
</div>
<div class="caja">
<h3>$160.548</h3>
<p>Ingresos</p>
</div>
</div>
</div>
<div class="widget comentarios">
<h3 class="titulo">Comentarios</h3>
<div class="contenedor">
<div class="comentario d-flex flex-wrap">
<div class="foto">
<a href="#">
<img src="https://placehold.it/200x200" width="100" alt="">
</a>
</div>
<div class="texto">
<a href="#"> Jhon Doe</a>
<p>en <a href="#"> Mi primer entrada </a></p>
<p class="texto-comentario">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet accusantium facilis culpa ullam tenetur, reiciendis possimus placeat optio eum reprehenderit.</p>
</div>
<div class="botones d-flex justify-content-start flex-wrap w-100">
<button class="aprobar"><i class="fa fa-check" aria-hidden="true"></i>Aprobar</button>
<button class="eliminar"><i class="fa fa-times" aria-hidden="true"></i>Eliminar</button>
<button class="bloquear"><i class="fa fa-flag" aria-hidden="true"></i>Bloquear Usuario</button>
</div>
</div>
<div class="comentario d-flex flex-wrap">
<div class="foto">
<a href="#">
<img src="https://placehold.it/200x200" width="100" alt="">
</a>
</div>
<div class="texto">
<a href="#"> Jhon Doe</a>
<p>en <a href="#"> Mi primer entrada </a></p>
<p class="texto-comentario">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet accusantium facilis culpa ullam tenetur, reiciendis possimus placeat optio eum reprehenderit.</p>
</div>
<div class="botones d-flex justify-content-start flex-wrap w-100">
<button class="aprobar"><i class="fa fa-check" aria-hidden="true"></i>Aprobar</button>
<button class="eliminar"><i class="fa fa-times" aria-hidden="true"></i>Eliminar</button>
<button class="bloquear"><i class="fa fa-flag" aria-hidden="true"></i>Bloquear Usuario</button>
</div>
</div>
<div class="comentario d-flex flex-wrap">
<div class="foto">
<a href="#">
<img src="https://placehold.it/200x200" width="100" alt="">
</a>
</div>
<div class="texto">
<a href="#"> Jhon Doe</a>
<p>en <a href="#"> Mi primer entrada </a></p>
<p class="texto-comentario">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet accusantium facilis culpa ullam tenetur, reiciendis possimus placeat optio eum reprehenderit.</p>
</div>
<div class="botones d-flex justify-content-start flex-wrap w-100">
<button class="aprobar"><i class="fa fa-check" aria-hidden="true"></i>Aprobar</button>
<button class="eliminar"><i class="fa fa-times" aria-hidden="true"></i>Eliminar</button>
<button class="bloquear"><i class="fa fa-flag" aria-hidden="true"></i>Bloquear Usuario</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>