Tema: Aparecer menu en modo responsive
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/04/2020, 23:33
saulrayados
 
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