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
    Commented el 2 nov. 2017 a las 17:34
  • no, como se lo pondría? Commented 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
    Commented 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
    Commented 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

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.