Aparecer menu en modo responsive

saulrayados · #1 (**permalink**) 13/04/2020, 23:33

buenas noches, tengo un problema, utilice un collapse de bootstrap y en el modo responsive si funciona el menu pero en version de escritorio no aparece el menu, para que aparezca tengo que declarar en css al id #slidder un display block pero el problema es que si las declaro ya no funciona en el modo responsive, ¿como puedo hacer para que funcione en los 2 casos?

Código HTML:

Ver original<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  </head>
  <body>
    <div class="menu_bar">
            <a href="#slider" class="bt-menu" data-toggle="collapse" role="button"><i class="fas fa-align-justify"></i></a>
      <span><a href="#"><i class="fas fa-user"> Acceder</i></a></span>
      <span><a href="#"><i class="fas fa-shopping-cart">(0)</i></a></span>
      <div class="container-2">
        <form>
          <span class="icon"><i class="fas fa-search"></i></span>
          <input type="search" id="search" placeholder="Search">
        </form>
      </div>
        </div>
    
    <div class="card-header" id="slider">
      <ul class="nav nav-pills card-header-pills">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">Movies</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Acción</a>
    <a class="dropdown-item" href="#">Aventura</a>
    <a class="dropdown-item" href="#">Ciencia ficción</a>
    <a class="dropdown-item" href="#">Comedia</a>
    <a class="dropdown-item" href="#">Drama</a>
    <a class="dropdown-item" href="#">Fantasía</a>
    <a class="dropdown-item" href="#">Guerra y Milicia</a>
    <a class="dropdown-item" href="#">Infantiles</a>
    <a class="dropdown-item" href="#">Musical</a>
    <a class="dropdown-item" href="#">Romance</a>
    <a class="dropdown-item" href="#">Suspenso</a>
    <a class="dropdown-item" href="#">Terror</a>
    <a class="dropdown-item" href="#">Western</a>
  </div>
</div>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
        
        <div id="searching">
        <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
    </form>
        </div>
        <div class="icon-user">
          <a href="#"><i class="fas fa-user"></i> Acceder</a>
          <!--<a href="#" data-toggle="collapse" data-target="#collapseExample">
    <i class="fas fa-user"> @Nombre</i>
  </a>
<div class="collapse" id="collapseExample">
  <div class="cont">
    <ul class="list-group">
              <li class="list-group-item"><a href="#">Configuración</a></li>
              <li class="list-group-item"><a href="#">Mis pedidos</a></li>
              <li class="list-group-item"><a href="#">Salir</a></li>
            </ul>
  </div>
</div>-->
      </div>
      <div class="icon-cart">
        <a href="#"><i class="fas fa-shopping-cart">(0)</i></a>
      </div>
      </ul>
    </div>
    
    <div class="container">
      <!--<h1>Error 404 - Not found</h1>
    <h4>La página solicitada no existe</h4>-->
      <br>
      sdfsdf
      <br>
      <br>
    </div>
    
    <div class="card-footer text-muted">
      Create by Team 4
    </div>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Código CSS:

Ver original.card-header .nav li a,
#dropdownMenuButton {
  list-style: none;
  color: #000;
}
 
.card-header #dropdownMenuButton {
  background: none;
  border: none;
}
 
.card-header .nav li:hover,
.card-header #dropdownMenuButton:hover {
  background: #d3ecf5;
}
 
#searching {
  margin-left: 30px;
  padding: 1px;
}
 
#searching input[type="search"] {
  width: 520px;
}
 
.icon-user {
  float: right;
  margin: auto 80px;
}
 
/*superior, derecha, inferior, izquierda*/
.icon-cart {
  margin: auto 40px;
}
 
.icon-user a,
.icon-cart a {
  text-decoration: none;
  color: #000;
}
 
.icon-user a:hover,
.icon-cart a:hover {
  border-radius: 10px;
  background: #d3ecf5;
  text-decoration: none;
  color: #e6e6e6;
}
 
.menu_bar {
  display: none ;
}
/* ----- */
 
.card-footer {
  text-align: center;
}
 
.container h1 {
  font-size: 80px;
}
 
.container h4 {
  font-size: 30px;
}
 
.container h1,
.container h4 {
  text-align: center;
}
 
#slider {
  display: block; /*si lo pongo si aparece en modo web pero en responsive no*/
}
 
@media screen and (max-width: 800px) /*800*/ {
  .menu_bar {
    display:block;
    width:100%;
    position: fixed;
    top:0;
    background:#E6344A;
  }
  
  .menu_bar .bt-menu {
    display: block;
    padding: 20px;
    color: #fff;
    overflow: hidden;
    font-size: 25px;
    font-weight: bold;
    text-decoration: none;
  }
  
  /* Menú */
  .card-header .nav {
    width: 80%;
    height: calc(100% - 80px);
    position: fixed;
    margin: 0;
    left: 0%;
    background: #023853; /**/
    margin-top: 65px;
  }
  
  .card-header .nav li,
  .card-header .nav,
  .card-header .dropdown {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,.5);
  }
  
  .card-header .nav li a,
  #dropdownMenuButton {
    display: block;
    color: #fff;
  }
  /* ----- */
  
  /* Iconos */
  .icon-cart,
  .icon-user,
  #searching {
    display: none;
  }
  
  .menu_bar span .fa-shopping-cart {
    float: right;
    margin: -45px 10px;
    color: #fff;
  }
  
  .menu_bar span .fa-user {
    float: right;
    margin: -45px 60px;
    color: #fff;
  }
  
  .menu .list-group {
    width: 50%;
  }
  /* ----- */
  
  /* Barra de busqueda */
  .container-2 {
    width: 300px;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    margin: -60px 50px; /*contenedor*/
  }
  
  .container-2 input#search {
    width: 50px;
    height: 50px;
    background: #2b303b;
    border: none;
    font-size: 10pt;
    float: left;
    padding-left: 35px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    margin: -60px 20px; /*input*/
    
    -webkit-transition: width .55s ease;
    -moz-transition: width .55s ease;
    -ms-transition: width .55s ease;
    -o-transition: width .55s ease;
    transition: width .55s ease;
  }
  
  .container-2 input#search::-webkit-input-placeholder {
    color: #65737e;
  }
  
  .container-2 input#search:-moz-placeholder { /* Firefox 18- */
    color: #65737e;
  }
  
  .container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
    color: #65737e;
  }
  
  .container-2 input#search:-ms-input-placeholder {
    color: #65737e;
  }
  
  .container-2 .icon {
    position: absolute;
    top: 50%;
    margin-left: 35px;
    margin-top: 14px;
    z-index: 1;
    color: #4f5b66;
  }
  
  .container-2 input#search:focus,
  .container-2 input#search:active {
    outline:none;
    width: 300px;
  }
  
  .container-2:hover input#search {
    width: 150px; /*tamaño input*/
  }
  
  .container-2:hover .icon {
    color: #93a2ad;
  }
  /* ----- */
}

Triby · #2 (**permalink**) 14/04/2020, 08:27

Imagino que bastará con poner la regla con display:none; dentro de media queries, en la resolución donde quieres que comience a funcionar como responsivo.

saulrayados · #3 (**permalink**) 14/04/2020, 11:34

como seria el codigo?, todavia no tengo mucho conocimiento en css

ArturoGallegos · #4 (**permalink**) 14/04/2020, 21:49

Cita:

Iniciado por saulrayados

como seria el codigo?, todavia no tengo mucho conocimiento en css

Sirvete investigar un poco en google, si te tomas un par de minutos y haces una busqueda en google con lo que se te dijo, obtendras tu respuesta mucho mas rápido.

Y no es que sea culero y grosero al no querer responderte como seria el codigo pero haz denotado poca iniciativa al preguntar eso sin antes intentarlo y/o investigarlo.