Tema: Problema con menu
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/01/2018, 04:07
sergiodueso
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 98
Antigüedad: 14 años
Puntos: 1
Problema con menu
Buenos días, tengo esta página:

Código Javascript: 
Ver original
  1. <script>
  2.     $(document).ready(function(){
  3.     $(".cerrar_menu").click(function () {
  4.             $('.navbar-toggle').click();
  5.              
  6.     });
  7. });
  8.   
  9.   </script>
Código CSS: 
Ver original
  1. <style>
  2.   
  3.   @import url('https://fonts.googleapis.com/css?family=Lobster');
  4.   @import url('https://fonts.googleapis.com/css?family=Courgette|Righteo');
  5.  
  6.   body {
  7.     font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  8.     -webkit-background-size: cover;
  9.     -moz-background-size: cover;
  10.     background-size: cover;
  11.     -o-background-size: cover;
  12.     position:relative;
  13.     width:auto;
  14.     
  15. }
  16.   #inicio {padding-top:40px;height:100vh;}
  17.   #carta {padding-top:50px;height:100vh; overflow:auto;}
  18.   #galeria {padding-top:50px;height:100vh; overflow:auto;}
  19.   #menu {padding-top:50px;height:100vh; width:99vw; overflow:auto;}
  20.   #contacto {padding-top:50px;height:100vh;}
  21.   .display-3
  22.   {
  23.       /*text-align:center;
  24.       font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  25.       color: #e0dfdc;
  26.       color:#FFF;
  27.   
  28.   letter-spacing: .1em;
  29.   text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);*/
  30.  
  31. text-shadow: 5px 5px 10px #edf000,
  32. 0 0 20px #fff,
  33. 0 0 30px #fff,
  34. 0 0 40px #edf000,
  35. 0 0 70px #edf000,
  36. 0 0 80px #edf000,
  37. 0 0 100px #edf000,
  38. 0 0 150px #edf000;
  39. text-align:center;
  40. }   
  41.   
  42.  
  43. .direccion
  44. {
  45.     text-align:center;
  46.       font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  47.      color: #e0dfdc;
  48.   
  49.   letter-spacing: .1em;
  50.   text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
  51. }
  52. .col-centrada{
  53.     float: none;
  54.     margin: 0 auto;
  55.     font-family: 'Lobster', cursive;
  56. }
  57. tr.carta {
  58.     color:#FFF;
  59.     font-size:20px;
  60. }
  61. @media only screen and (max-width: 768px) {
  62. tr.carta {font-size:14px;}
  63. img.logo {height:200px;}
  64.  
  65. }
  66. </style>

Código HTML: 
Ver original
  1. </head>
  2. <body data-spy="scroll" data-target=".navbar" data-offset="50">
  3.  
  4. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="font-family:'Righteous', cursive; font-size:18px;">
  5.         <div class="container-fluid">
  6.             <!-- Brand and toggle get grouped for better mobile display -->
  7.             <div class="navbar-header">
  8.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  9.                     <span class="sr-only">Menú</span>
  10.                     <span class="icon-bar"></span>
  11.                     <span class="icon-bar"></span>
  12.                     <span class="icon-bar"></span>
  13.                 </button>
  14.                 <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
  15.                 <a class="navbar-brand" href="#">Menú</a>
  16.             </div>
  17.             <!-- Collect the nav links, forms, and other content for toggling -->
  18.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  19.                 <ul class="nav navbar-nav">
  20.                     <li class="active">
  21.                         <a class="cerrar_menu" href="#">Inicio</a></li>
  22.                     <li>
  23.                         <a class="cerrar_menu" href="#carta">Carta</a></li>
  24.                     <li>
  25.                         <a class="cerrar_menu" href="#galeria">Galería</a></li>
  26.                     <li>
  27.                         <a class="cerrar_menu" href="#menu">Menú Especial</a></li>
  28.                     <li>
  29.                         <a class="cerrar_menu" href="#contacto">Contacto</a></li>
  30.                 </ul>
  31.             </div>
  32.             <!-- /.navbar-collapse -->
  33.         </div>
  34.         <!-- /.container -->
  35.     </nav>
  36.  
  37. <div id="inicio" class="container-fluid" style="background-color:#F00; height:auto;">
  38.     <div class="jumbotron" style="background-color:#F00;">
  39.         <h1 class="display-3">Cafetería Tonik</h1>
  40.         <p class="direccion">Avda. Puerta de Sancho, 12 - Zaragoza</p>
  41.     </div>
  42.     
  43.     <div class="row">
  44.         <div class="col-sm-12">
  45.             <img class="logo center-block" alt="Bootstrap Image Preview" height="350px" src="fondo/Cafeteria-tonik-fondo-transparente-sin-letra.png" />
  46.         </div>
  47.      </div>
  48. </div>

Es una página con un menú, un título y una imagen. Lo que ocurre es que cuando cargo la página, en lugar de empezar por el Inicio, se va a la opción de Contacto. Tengo puesta la class="active" en la opción de Inicio, pero ni con esas. Gracias.