[SOLUCIONADO] Problema con menu

sergiodueso · #1 (**permalink**) 09/01/2018, 04:07

Buenos días, tengo esta página:

Código Javascript:

Ver original<script>
    $(document).ready(function(){
    $(".cerrar_menu").click(function () {
            $('.navbar-toggle').click();
             
    });
});
  
  </script>

Código CSS:

Ver original<style>
  
  @import url('https://fonts.googleapis.com/css?family=Lobster');
  @import url('https://fonts.googleapis.com/css?family=Courgette|Righteo');
 
  body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    position:relative;
    width:auto;
    
}
  #inicio {padding-top:40px;height:100vh;}
  #carta {padding-top:50px;height:100vh; overflow:auto;}
  #galeria {padding-top:50px;height:100vh; overflow:auto;}
  #menu {padding-top:50px;height:100vh; width:99vw; overflow:auto;}
  #contacto {padding-top:50px;height:100vh;}
  .display-3
  {
      /*text-align:center;
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
      color: #e0dfdc;
      color:#FFF;
  
  letter-spacing: .1em;
  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);*/
 
text-shadow: 5px 5px 10px #edf000,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #edf000,
0 0 70px #edf000,
0 0 80px #edf000,
0 0 100px #edf000,
0 0 150px #edf000;
text-align:center;
}   
  
 
.direccion
{
    text-align:center;
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
     color: #e0dfdc;
  
  letter-spacing: .1em;
  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);
}
.col-centrada{
    float: none;
    margin: 0 auto;
    font-family: 'Lobster', cursive;
}
tr.carta {
    color:#FFF;
    font-size:20px;
}
@media only screen and (max-width: 768px) {
tr.carta {font-size:14px;}
img.logo {height:200px;}
 
}
</style>

Código HTML:

Ver original</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="font-family:'Righteous', cursive; font-size:18px;">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Menú</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
                <a class="navbar-brand" href="#">Menú</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a class="cerrar_menu" href="#">Inicio</a></li>
                    <li>
                        <a class="cerrar_menu" href="#carta">Carta</a></li>
                    <li>
                        <a class="cerrar_menu" href="#galeria">Galería</a></li>
                    <li>
                        <a class="cerrar_menu" href="#menu">Menú Especial</a></li>
                    <li>
                        <a class="cerrar_menu" href="#contacto">Contacto</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
 
<div id="inicio" class="container-fluid" style="background-color:#F00; height:auto;">
    <div class="jumbotron" style="background-color:#F00;">
        <h1 class="display-3">Cafetería Tonik</h1>
        <p class="direccion">Avda. Puerta de Sancho, 12 - Zaragoza</p>
    </div>
    
    <div class="row">
        <div class="col-sm-12">
            <img class="logo center-block" alt="Bootstrap Image Preview" height="350px" src="fondo/Cafeteria-tonik-fondo-transparente-sin-letra.png" />
        </div>
     </div>
</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.

sergiodueso · #2 (**permalink**) 17/01/2018, 14:36

Ya está resuelto. He vuelto a hacer todo el div "contenido" nuevo y ya funciona bien. Gracias de todas formas