0

Bueno mi contenido se encima con mi menú y eso que lo pongo dentro de un col-md cada parte procurando que tenga en total 12 y todo eso dentro de un row

.nav-side-menu {
      overflow: auto;
      font-family: verdana;
      font-size: 12px;
      font-weight: 200;
      background-color: #2e353d;
      position: fixed;
      top: 0px;
      width: 300px;
      height: 100%;
      color: #e1ffff;
    }
<div class="row">
    
    <!-- Asigno que sea de 3 columnas el menu -->
    <div class="col-xs-12 col-md-3 col-lg-3">
      
          <div class="nav-side-menu">
            <div class="brand">Brand Logo</div>
            <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
          
                <div class="menu-list">
          
                    <ul id="menu-content" class="menu-content collapse out">
                        <li>
                          <a href="#">
                          <i class="fa fa-dashboard fa-lg"></i> Dashboard
                          </a>
                        </li>

                         <li>
                          <a href="#">
                          <i class="fa fa-user fa-lg"></i> Profile
                          </a>
                          </li>

                         <li>
                          <a href="#">
                          <i class="fa fa-users fa-lg"></i> Users
                          </a>
                        </li>
                    </ul>
             </div>
        </div>

    </div>
<!-- Asigno que sea de 9 columnas el contenido -->
    <div class="col-md-9">
      
       <section class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="margin-top:70px;">
            <div class="container">
                <!--  row 1 -->
                <div class="row">

                  <div class="col-md-6">
                    <h3><label>Puesto: <span><?php echo $_SESSION['puesto']; ?><span/></label></h3>
                    <h3><?php echo date('d - M - Y'); ?></h3>
                  </div>
                  <div class="col-md-6">
                    <h3><label>Bienvenido <span><span/><?php echo $_SESSION['nombre']; ?> <?php echo $_SESSION['apellido']; ?></label></h3>
                  </div>

                </div>

                <!--  row 1 -->
                <div class="row">
                  
                  <div class="col-md-8">
                      <center class="">
                        <span class="glyphicon glyphicon-user iconPresentation"></span>
                        <br>
                        <label class="label label-default labelPresentation"><?php echo $_SESSION['puesto']; ?><label/>
                      </center>
                  </div>

                </div>
            </div>

        </section>

    </div>

</div>

Ya lo demás son estilos de color y diseño... Se encima cuando la página llega a 993px y de hecho se come la letra ¿que no hago o que hago mal?

4
  • ¿Has probado a ponerle un z-index a tu menú?
    – Alvaro Montoro
    el 2 nov. 2017 a las 17:34
  • no, como se lo pondría? el 2 nov. 2017 a las 18:31
  • 1
    en el CSS que pones, añade algo como z-index:100 (o algún número grande para que sea mayor que el del contenido de debajo).
    – Alvaro Montoro
    el 2 nov. 2017 a las 18:32
  • Mi unica duda es... has utilizado la librería de bootstrap? Por que no veo que la pusieras en el código
    – sr_luis
    el 19 dic. 2018 a las 23:43

3 respuestas 3

0

no se te ocurrio color un padding entre los objetos para que se mantengan a una distancia prudencial. Recuerda que puedes trabajar el responsive design cuando cambias la resolución de tu pantalla.

  .nav-side-menu {
  overflow: auto;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #2e353d;
  position: fixed;
  top: 0px;
  width: 300px;
  height: 100%;
  color: #e1ffff;
  padding: 2px 10px;
}
0

¿Desde que dispositivo estás haciendo las pruebas? Pues en el primer caso donde asignas las 3 columnas estás definiendo el ancho de columnas para el caso dispositivos grandes (col-lg-*), para medianos (col-md-*) y para extra chicos (col-xs-*).

<!-- Asigno que sea de 3 columnas el menu -->
<div class="col-xs-12 col-md-3 col-lg-3">

Sin embargo al momento de definir las otras 9 columnas sólo lo estás haciendo para dispositivos medianos (col-md-*), te faltan definir las columnas para los demás dispositivos. Si estás haciendo pruebas en una pantalla grande, es probable que no se vea correctamente.

<!-- Asigno que sea de 9 columnas el contenido -->
<div class="col-md-9">

Ahora bien, para asegurar que todo el contenido se vea dentro de una misma fila pon un <div class="row">Aqui todo tu codigo</div> para que se vean en una sola fila.

<!-- Asigno que sea de 3 columnas el menu -->
<div class="row">
<div class="col-xs-12 col-md-3 col-lg-3">

      <div class="nav-side-menu">
        <div class="brand">Brand Logo</div>
        <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>

            <div class="menu-list">

                <ul id="menu-content" class="menu-content collapse out">
                    <li>
                      <a href="#">
                      <i class="fa fa-dashboard fa-lg"></i> Dashboard
                      </a>
                    </li>

                     <li>
                      <a href="#">
                      <i class="fa fa-user fa-lg"></i> Profile
                      </a>
                      </li>

                     <li>
                      <a href="#">
                      <i class="fa fa-users fa-lg"></i> Users
                      </a>
                    </li>
                </ul>
         </div>
    </div>

</div>


<!-- Asigno que sea de 9 columnas el contenido -->
<div class="col-md-9">

   <section class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="margin-top:70px;">
        <div class="container">
            <!--  row 1 -->
            <div class="row">

              <div class="col-md-6">
                <h3><label>Puesto: <?php echo $_SESSION['puesto']; ?></label></h3>
                <h3><?php echo date('d - M - Y'); ?></h3>
              </div>
              <div class="col-md-6">
                <h3><label>Bienvenido <?php echo $_SESSION['nombre']; ?> <?php echo $_SESSION['apellido']; ?></label></h3>
              </div>

            </div>

            <!--  row 1 -->
            <div class="row">

              <div class="col-md-8">
                  <center>
                    <span class="glyphicon glyphicon-user"></span>
                    <br>
                    <label class="label label-default"><?php echo $_SESSION['puesto']; ?><label/>
                  </center>
              </div>

            </div>
        </div>

    </section>

</div>

Te recomiendo que primero hagas un diseño de que es lo que quieres hacer, pues el código está más organizado y es difícil de entender que es lo que quieres realizar.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo de la empresa</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Users</a></li>
    </ul>
  </div>
</nav>

Utiliza la etiqueta <nav> para definir tu menú de navegación. Puedes guiarte aqui.

0

Ya que el menu es fixed y siempre se superpondra al contenido a medida que se hace scroll porque no le pones z-index: 6666; se superpondra el menu a todos los elementos de la pagina... o sea, este siempre quedara por encima..

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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