0

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>

1 respuesta 1

0

que tal @Marcos puedes probar con colocarle {position: fixed;} en tu clase .barra-lateral asi el realiza la funcion de quedarse estatico, normalmente bootstrap da ese tipo de errores el que choca mucho cuando uno quiere dar estilos propios

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;
position: fixed;
}

.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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.