Foros del Web » Creando para Internet » CSS »

Aparecer menu en modo responsive

 Estas en el tema de Aparecer menu en modo responsive en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/04/2020, 23:33
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 8 años
Puntos: 0
Aparecer menu en modo responsive
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
  1. <html>
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title></title>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  7.     <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  8.   </head>
  9.   <body>
  10.     <div class="menu_bar">
  11.             <a href="#slider" class="bt-menu" data-toggle="collapse" role="button"><i class="fas fa-align-justify"></i></a>
  12.       <span><a href="#"><i class="fas fa-user"> Acceder</i></a></span>
  13.       <span><a href="#"><i class="fas fa-shopping-cart">(0)</i></a></span>
  14.       <div class="container-2">
  15.         <form>
  16.           <span class="icon"><i class="fas fa-search"></i></span>
  17.           <input type="search" id="search" placeholder="Search">
  18.         </form>
  19.       </div>
  20.         </div>
  21.     
  22.     <div class="card-header" id="slider">
  23.       <ul class="nav nav-pills card-header-pills">
  24.         <li class="nav-item">
  25.           <a class="nav-link" href="#">Home</a>
  26.         </li>
  27.         <div class="dropdown">
  28.   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">Movies</button>
  29.   <div class="dropdown-menu">
  30.     <a class="dropdown-item" href="#">Acción</a>
  31.     <a class="dropdown-item" href="#">Aventura</a>
  32.     <a class="dropdown-item" href="#">Ciencia ficción</a>
  33.     <a class="dropdown-item" href="#">Comedia</a>
  34.     <a class="dropdown-item" href="#">Drama</a>
  35.     <a class="dropdown-item" href="#">Fantasía</a>
  36.     <a class="dropdown-item" href="#">Guerra y Milicia</a>
  37.     <a class="dropdown-item" href="#">Infantiles</a>
  38.     <a class="dropdown-item" href="#">Musical</a>
  39.     <a class="dropdown-item" href="#">Romance</a>
  40.     <a class="dropdown-item" href="#">Suspenso</a>
  41.     <a class="dropdown-item" href="#">Terror</a>
  42.     <a class="dropdown-item" href="#">Western</a>
  43.   </div>
  44. </div>
  45.         <li class="nav-item">
  46.           <a class="nav-link" href="#">Contacto</a>
  47.         </li>
  48.         
  49.         <div id="searching">
  50.         <form class="form-inline my-2 my-lg-0">
  51.       <input class="form-control mr-sm-2" type="search" placeholder="Search">
  52.       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
  53.     </form>
  54.         </div>
  55.         <div class="icon-user">
  56.           <a href="#"><i class="fas fa-user"></i> Acceder</a>
  57.           <!--<a href="#" data-toggle="collapse" data-target="#collapseExample">
  58.     <i class="fas fa-user"> @Nombre</i>
  59.   </a>
  60. <div class="collapse" id="collapseExample">
  61.   <div class="cont">
  62.     <ul class="list-group">
  63.               <li class="list-group-item"><a href="#">Configuración</a></li>
  64.               <li class="list-group-item"><a href="#">Mis pedidos</a></li>
  65.               <li class="list-group-item"><a href="#">Salir</a></li>
  66.             </ul>
  67.   </div>
  68. </div>-->
  69.       </div>
  70.       <div class="icon-cart">
  71.         <a href="#"><i class="fas fa-shopping-cart">(0)</i></a>
  72.       </div>
  73.       </ul>
  74.     </div>
  75.     
  76.     <div class="container">
  77.       <!--<h1>Error 404 - Not found</h1>
  78.     <h4>La página solicitada no existe</h4>-->
  79.       <br>
  80.       sdfsdf
  81.       <br>
  82.       <br>
  83.     </div>
  84.     
  85.     <div class="card-footer text-muted">
  86.       Create by Team 4
  87.     </div>
  88.     
  89.     <!-- Optional JavaScript -->
  90.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  91.     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  92.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  93.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  94.   </body>
  95. </html>

Código CSS: 
Ver original
  1. .card-header .nav li a,
  2. #dropdownMenuButton {
  3.   list-style: none;
  4.   color: #000;
  5. }
  6.  
  7. .card-header #dropdownMenuButton {
  8.   background: none;
  9.   border: none;
  10. }
  11.  
  12. .card-header .nav li:hover,
  13. .card-header #dropdownMenuButton:hover {
  14.   background: #d3ecf5;
  15. }
  16.  
  17. #searching {
  18.   margin-left: 30px;
  19.   padding: 1px;
  20. }
  21.  
  22. #searching input[type="search"] {
  23.   width: 520px;
  24. }
  25.  
  26. .icon-user {
  27.   float: right;
  28.   margin: auto 80px;
  29. }
  30.  
  31. /*superior, derecha, inferior, izquierda*/
  32. .icon-cart {
  33.   margin: auto 40px;
  34. }
  35.  
  36. .icon-user a,
  37. .icon-cart a {
  38.   text-decoration: none;
  39.   color: #000;
  40. }
  41.  
  42. .icon-user a:hover,
  43. .icon-cart a:hover {
  44.   border-radius: 10px;
  45.   background: #d3ecf5;
  46.   text-decoration: none;
  47.   color: #e6e6e6;
  48. }
  49.  
  50. .menu_bar {
  51.   display: none ;
  52. }
  53. /* ----- */
  54.  
  55. .card-footer {
  56.   text-align: center;
  57. }
  58.  
  59. .container h1 {
  60.   font-size: 80px;
  61. }
  62.  
  63. .container h4 {
  64.   font-size: 30px;
  65. }
  66.  
  67. .container h1,
  68. .container h4 {
  69.   text-align: center;
  70. }
  71.  
  72. #slider {
  73.   display: block; /*si lo pongo si aparece en modo web pero en responsive no*/
  74. }
  75.  
  76. @media screen and (max-width: 800px) /*800*/ {
  77.   .menu_bar {
  78.     display:block;
  79.     width:100%;
  80.     position: fixed;
  81.     top:0;
  82.     background:#E6344A;
  83.   }
  84.   
  85.   .menu_bar .bt-menu {
  86.     display: block;
  87.     padding: 20px;
  88.     color: #fff;
  89.     overflow: hidden;
  90.     font-size: 25px;
  91.     font-weight: bold;
  92.     text-decoration: none;
  93.   }
  94.   
  95.   /* Menú */
  96.   .card-header .nav {
  97.     width: 80%;
  98.     height: calc(100% - 80px);
  99.     position: fixed;
  100.     margin: 0;
  101.     left: 0%;
  102.     background: #023853; /**/
  103.     margin-top: 65px;
  104.   }
  105.   
  106.   .card-header .nav li,
  107.   .card-header .nav,
  108.   .card-header .dropdown {
  109.     display: block;
  110.     border-bottom: 1px solid rgba(255,255,255,.5);
  111.   }
  112.   
  113.   .card-header .nav li a,
  114.   #dropdownMenuButton {
  115.     display: block;
  116.     color: #fff;
  117.   }
  118.   /* ----- */
  119.   
  120.   /* Iconos */
  121.   .icon-cart,
  122.   .icon-user,
  123.   #searching {
  124.     display: none;
  125.   }
  126.   
  127.   .menu_bar span .fa-shopping-cart {
  128.     float: right;
  129.     margin: -45px 10px;
  130.     color: #fff;
  131.   }
  132.   
  133.   .menu_bar span .fa-user {
  134.     float: right;
  135.     margin: -45px 60px;
  136.     color: #fff;
  137.   }
  138.   
  139.   .menu .list-group {
  140.     width: 50%;
  141.   }
  142.   /* ----- */
  143.   
  144.   /* Barra de busqueda */
  145.   .container-2 {
  146.     width: 300px;
  147.     vertical-align: middle;
  148.     white-space: nowrap;
  149.     position: relative;
  150.     margin: -60px 50px; /*contenedor*/
  151.   }
  152.   
  153.   .container-2 input#search {
  154.     width: 50px;
  155.     height: 50px;
  156.     background: #2b303b;
  157.     border: none;
  158.     font-size: 10pt;
  159.     float: left;
  160.     padding-left: 35px;
  161.     -webkit-border-radius: 5px;
  162.     -moz-border-radius: 5px;
  163.     border-radius: 5px;
  164.     color: #fff;
  165.     margin: -60px 20px; /*input*/
  166.     
  167.     -webkit-transition: width .55s ease;
  168.     -moz-transition: width .55s ease;
  169.     -ms-transition: width .55s ease;
  170.     -o-transition: width .55s ease;
  171.     transition: width .55s ease;
  172.   }
  173.   
  174.   .container-2 input#search::-webkit-input-placeholder {
  175.     color: #65737e;
  176.   }
  177.   
  178.   .container-2 input#search:-moz-placeholder { /* Firefox 18- */
  179.     color: #65737e;
  180.   }
  181.   
  182.   .container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
  183.     color: #65737e;
  184.   }
  185.   
  186.   .container-2 input#search:-ms-input-placeholder {
  187.     color: #65737e;
  188.   }
  189.   
  190.   .container-2 .icon {
  191.     position: absolute;
  192.     top: 50%;
  193.     margin-left: 35px;
  194.     margin-top: 14px;
  195.     z-index: 1;
  196.     color: #4f5b66;
  197.   }
  198.   
  199.   .container-2 input#search:focus,
  200.   .container-2 input#search:active {
  201.     outline:none;
  202.     width: 300px;
  203.   }
  204.   
  205.   .container-2:hover input#search {
  206.     width: 150px; /*tamaño input*/
  207.   }
  208.   
  209.   .container-2:hover .icon {
  210.     color: #93a2ad;
  211.   }
  212.   /* ----- */
  213. }
Última edición por saulrayados; 13/04/2020 a las 23:41
  #2 (permalink)  
Antiguo 14/04/2020, 08:27
Avatar de Triby
Mod on free time
  
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: Aparecer menu en modo responsive
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.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 14/04/2020, 11:34
 
Fecha de Ingreso: abril-2016
Mensajes: 44
Antigüedad: 8 años
Puntos: 0
Respuesta: Aparecer menu en modo responsive
como seria el codigo?, todavia no tengo mucho conocimiento en css
  #4 (permalink)  
Antiguo 14/04/2020, 21:49
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Aparecer menu en modo responsive
Cita:
Iniciado por saulrayados Ver Mensaje
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.

Etiquetas: bootstrap, modo, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:42.