Problema con menu

sergiodueso · #1 (**permalink**) 09/03/2018, 09:31

Buenas tardes, tengo este menú;

Código HTML:

Ver original<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a data-scroll class="navbar-brand" href="#inicio">
  <img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent" style="overflow : auto;">
    <ul class="navbar-nav mr-auto text-center" style="font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial,' sans-serif';">
      <li class="nav-item active">
        <a data-scroll class="nav-link" href="#inicio">Inicio</span></a>
      </li>
      <li class="nav-item">
        <a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
      </li>
      <li class="nav-item">
        <a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
      </li>
       <li class="nav-item">
        <a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
      </li>
       <li class="nav-item">
        <a data-scroll class="nav-link" href="#nosotras">Nosotras</a>
      </li>
       <li class="nav-item">
        <a data-scroll class="nav-link" href="#galeria">Galería</a>
      </li>
      <li class="nav-item">
        <a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
      </li>
      <li class="nav-item">
        <a data-scroll class="nav-link" href="#picoteo">Picoteo</a>
      </li>
       <li class="nav-item">
        <a data-scroll class="nav-link" href="#contacto">Contacto</a>
      </li>
    </ul>
  </div>
</nav>

Funciona perfecto, pero al ponerlo en el móvil con la pantalla apaisada, el menú no se ve entero. Le he puesto overflow: auto, pero nada. Además parece que se ve la barra de desplazamiento pero no hace nada. Gracias.

tonigomila1988 · #2 (**permalink**) 12/03/2018, 01:36

Buenos días,

primero de todo, antes de usar Bootstrap, tendrías que aprender a usar bien el CSS estándar, ya que el atributo style en los tags, en mi opinión, deberían desaparecer y hacerlo todo con CSS.

Respondiendo a tu pregunta: ¿Has puesto el meta viewport en el head? Creo que se debe a eso. Y si ya la has puesto, ya que estas usando Bootstrap, crea un media query para los tamaños de pantalla para que se vea según el ancho de la pantalla.

Cualquier duda, no olvides en preguntar.

Un saludo.

sergiodueso · #3 (**permalink**) 12/03/2018, 08:28

Buenas tardes, lo del viewport está puesto. Y lo de los media queries lo he intentado pero al ponerlo en las etiquetas style, no funciona y no sé por qué. Alguna otra solución? Gracias

tonigomila1988 · #4 (**permalink**) 13/03/2018, 01:12

Hola,

¿podrías publicar tu head para ver como lo tienes estructurado? Así podría hacer pruebas yo mismo y podría sacar algo.

Un saludo.

sergiodueso · #5 (**permalink**) 13/03/2018, 18:39

Código HTML:

Ver original<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/bootstrap-grid.min.css"/>
<link rel="stylesheet" href="css/fontawesome.min.css"/>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/smooth-scroll.min.js"></script>
<script>
      smoothScroll.init({
      selector: '[data-scroll]', // Selector for links (must be a class, ID, data attribute, or element tag)
      selectorHeader: null, // Selector for fixed headers (must be a valid CSS selector) [optional]
      speed: 1500, // Integer. How fast to complete the scroll in milliseconds
      easing: 'easeInOutCubic', // Easing pattern to use
      offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
      callback: function ( anchor, toggle ) {} // Function to run after scrolling
      });
</script>
<title>Turibamba</title>
 
<style>
    @import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
    @import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
    @import url('https://fonts.googleapis.com/css?family=Pacifico');
    html, body{
        height: 100vh;
        /*font-family: 'Pacifico', cursive;*/
        font-family: 'Gloria Hallelujah', cursive;
        /*font-family: 'Kaushan Script', cursive;*/
    }
        
    .slider-inicio{
        background: url(imagenes/fondo1.jpg);
        height: 100vh;
        /*background-size: cover;*/
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        width: 100vw;
    }
    .fondo-galeria1{
        background: url(imagenes/back5.jpg);
        height: 100vh;
        /*background-size: cover;*/
        background-size: 100% 100%;
        background-position: center center;
        background-attachment: fixed;
    }
    .fondo-nosotras{
        background: url(imagenes/back5.jpg);
        height: 100vh;
        /*background-size: cover;*/
        background-size: 100% 100%;
        background-position: center center;
        background-attachment: fixed;
    }
    .sombra-cards {
      -webkit-box-shadow: 3px 3px 5px 6px #848484;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
      -moz-box-shadow:    3px 3px 5px 6px #848484;  /* Firefox 3.5 - 3.6 */
      box-shadow:         3px 3px 5px 6px #848484;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
       .sombra-galeria {
            -webkit-box-shadow: 3px 3px 5px 6px #848484;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
      -moz-box-shadow:    3px 3px 5px 6px #848484;  /* Firefox 3.5 - 3.6 */
      box-shadow:         3px 3px 5px 6px #848484;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */          
}
</style>
</head>

sergiodueso · #6 (**permalink**) 15/03/2018, 03:04

Buenos días. Ahora veo que aparece la barra vertical pero al momento desaparece. No sé por qué. Gracias.

tonigomila1988 · #7 (**permalink**) 16/03/2018, 06:40

Hola,

primero de todo, si vinculas el archivo bootstrap.css, no hace falta que vincules el archivo bootstrap.grid.css, por que todo lo que hay en el archivo bootstrap.grid.css está en el archivo bootstrap.css, por que ahí esta todo.

He probado tu código y no se a que barra vertical te refieres.

Creo que no he descargado la misma librería smooth scroll que la que tienes tu.

He encontrado un código en w3schools que puede ser muy útil. (Yo tendría a w3schools como referencia, ya que el código suele ser muy estándar).

https://www.w3schools.com/jquery/try...e_smoothscroll

Prueba si con este código va bien.

Vuelvo a recalcarte: No etiquetas style en los tags HTML y no tag style en el head. Lo recomendable y estándar (y sobre todo limpio y organizado), es tener tu archivo css donde aplicas tus estilos personalizados, dejando mucho más legible el código HTML.

Ya me dirás si te funciona mejor o si no es eso lo que quieres arreglar.

Un saludo.

sergiodueso · #8 (**permalink**) 16/03/2018, 09:15

Gracias por tu respuesta. Eso no es lo que me pasa. De hecho, yo uso la librería smooth scroll para pasar de un div a otro. Lo que a mi me pasa es que mi menú es extenso y cuando pongo el móvil en apaisado, hay opciones del menú que no aparecen y me gustaría saber si se pueden poner barras de desplazamiento para que se vean todas las opiniones del menú. Sé que si le quito la opción fixed-top al menú, sí que hace el scroll, pero uyo quiero que el menú esté fijo arriba. Gracias. Te pongo la URL de la página www.turibamba.vzpla.net

tonigomila1988 · #9 (**permalink**) 19/03/2018, 06:06

Hola sergiodueso

ahora viendo en funcionamiento tu web, entiendo lo que me querías explicar, el menú te cubre toda la pantalla y veo como el scroll sale en un principio y desaparece. Cuando pueda, echaré un vistazo al código del menú, por que está claro que está enfocado ahí, y a ver si encuentro una solución.
¿Utilizas Bootstrap 3 o Bootstrap 4?

Un saludo.

sergiodueso · #10 (**permalink**) 20/03/2018, 21:16

Bootstrap 4