problem when placing the fixed top in a lateral menu using bootstrap4

Navigation
0

I have this administrative panel and I want to place a fixed side menu so that when I do scroll it stays fixed, the class fixed-top in Botstrap allows me to do it but it does not work well in side menus 

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>
    
asked by Efrainrodc 31.12.2017 в 01:59
source

1 answer

0

How such @Marcos you can try to place {position: fixed;} in your classbar-lateral so he performs the function of staying static, usually bootstrap gives that kind of errors which hits a lot when you want to give your own styles 

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>
    
answered by 02.01.2018 в 18:38
Compare substrings within a arraylist in java Can you group the elements of the legend in kendoChart with JQuery?