Foros del Web » Creando para Internet » CSS »

Problema con menu

Estas en el tema de Problema con menu en el foro de CSS en Foros del Web. Buenas tardes, tengo este menú; @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < nav class = "navbar navbar-expand-md navbar-dark bg-dark fixed-top" >   < a data-scroll ...
  #1 (permalink)  
Antiguo 09/03/2018, 09:31
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 7 años, 10 meses
Puntos: 1
Problema con menu

Buenas tardes, tengo este menú;

Código HTML:
Ver original
  1. <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  2.   <a data-scroll class="navbar-brand" href="#inicio">
  3.   <img src="imagenes/logo.png" width="30px" height="30px" class="d-inline-block align-top" alt="Turibamba Ocio"/>Turibamba</a>
  4.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  5.     <span class="navbar-toggler-icon"></span>
  6.   </button>
  7.  
  8.   <div class="collapse navbar-collapse" id="navbarSupportedContent" style="overflow : auto;">
  9.     <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';">
  10.       <li class="nav-item active">
  11.         <a data-scroll class="nav-link" href="#inicio">Inicio</span></a>
  12.       </li>
  13.       <li class="nav-item">
  14.         <a data-scroll class="nav-link" href="#cumpleaños">Cumpleaños</a>
  15.       </li>
  16.       <li class="nav-item">
  17.         <a data-scroll class="nav-link" href="#animaciones">Animaciones</a>
  18.       </li>
  19.        <li class="nav-item">
  20.         <a data-scroll class="nav-link" href="#despedidas">Despedidas</a>
  21.       </li>
  22.        <li class="nav-item">
  23.         <a data-scroll class="nav-link" href="#nosotras">Nosotras</a>
  24.       </li>
  25.        <li class="nav-item">
  26.         <a data-scroll class="nav-link" href="#galeria">Galería</a>
  27.       </li>
  28.       <li class="nav-item">
  29.         <a data-scroll class="nav-link" href="#tarifas">Tarifas</a>
  30.       </li>
  31.       <li class="nav-item">
  32.         <a data-scroll class="nav-link" href="#picoteo">Picoteo</a>
  33.       </li>
  34.        <li class="nav-item">
  35.         <a data-scroll class="nav-link" href="#contacto">Contacto</a>
  36.       </li>
  37.     </ul>
  38.   </div>
  39. </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.
  #2 (permalink)  
Antiguo 12/03/2018, 02:36
 
Fecha de Ingreso: mayo-2011
Ubicación: Palma de Mallorca
Mensajes: 108
Antigüedad: 7 años, 6 meses
Puntos: 4
Respuesta: Problema con menu

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.
  #3 (permalink)  
Antiguo 12/03/2018, 09:28
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Problema con menu

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
  #4 (permalink)  
Antiguo 13/03/2018, 02:12
 
Fecha de Ingreso: mayo-2011
Ubicación: Palma de Mallorca
Mensajes: 108
Antigüedad: 7 años, 6 meses
Puntos: 4
Respuesta: Problema con menu

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.
  #5 (permalink)  
Antiguo 13/03/2018, 19:39
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Problema con menu

Código HTML:
Ver original
  1. <meta charset="utf-8"/>
  2. <meta http-equiv="x-ua-compatible" content="ie=edge">
  3. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  4. <link rel="stylesheet" href="css/bootstrap.css"/>
  5. <link rel="stylesheet" href="css/bootstrap-grid.min.css"/>
  6. <link rel="stylesheet" href="css/fontawesome.min.css"/>
  7. <script src="js/jquery-3.3.1.min.js"></script>
  8. <script src="js/smooth-scroll.min.js"></script>
  9.       smoothScroll.init({
  10.       selector: '[data-scroll]', // Selector for links (must be a class, ID, data attribute, or element tag)
  11.       selectorHeader: null, // Selector for fixed headers (must be a valid CSS selector) [optional]
  12.       speed: 1500, // Integer. How fast to complete the scroll in milliseconds
  13.       easing: 'easeInOutCubic', // Easing pattern to use
  14.       offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
  15.       callback: function ( anchor, toggle ) {} // Function to run after scrolling
  16.       });
  17. <title>Turibamba</title>
  18.  
  19.     @import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
  20.     @import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
  21.     @import url('https://fonts.googleapis.com/css?family=Pacifico');
  22.     html, body{
  23.         height: 100vh;
  24.         /*font-family: 'Pacifico', cursive;*/
  25.         font-family: 'Gloria Hallelujah', cursive;
  26.         /*font-family: 'Kaushan Script', cursive;*/
  27.     }
  28.        
  29.     .slider-inicio{
  30.         background: url(imagenes/fondo1.jpg);
  31.         height: 100vh;
  32.         /*background-size: cover;*/
  33.         background-size: 100% 100%;
  34.         background-repeat: no-repeat;
  35.         background-position: center center;
  36.         background-attachment: fixed;
  37.         width: 100vw;
  38.     }
  39.     .fondo-galeria1{
  40.         background: url(imagenes/back5.jpg);
  41.         height: 100vh;
  42.         /*background-size: cover;*/
  43.         background-size: 100% 100%;
  44.         background-position: center center;
  45.         background-attachment: fixed;
  46.     }
  47.     .fondo-nosotras{
  48.         background: url(imagenes/back5.jpg);
  49.         height: 100vh;
  50.         /*background-size: cover;*/
  51.         background-size: 100% 100%;
  52.         background-position: center center;
  53.         background-attachment: fixed;
  54.     }
  55.     .sombra-cards {
  56.       -webkit-box-shadow: 3px 3px 5px 6px #848484;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  57.       -moz-box-shadow:    3px 3px 5px 6px #848484;  /* Firefox 3.5 - 3.6 */
  58.       box-shadow:         3px 3px 5px 6px #848484;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  59. }
  60.        .sombra-galeria {
  61.             -webkit-box-shadow: 3px 3px 5px 6px #848484;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  62.       -moz-box-shadow:    3px 3px 5px 6px #848484;  /* Firefox 3.5 - 3.6 */
  63.       box-shadow:         3px 3px 5px 6px #848484;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */          
  64. }
  65. </head>

Última edición por sergiodueso; 15/03/2018 a las 03:49
  #6 (permalink)  
Antiguo 15/03/2018, 04:04
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Problema con menu

Buenos días. Ahora veo que aparece la barra vertical pero al momento desaparece. No sé por qué. Gracias.
  #7 (permalink)  
Antiguo 16/03/2018, 07:40
 
Fecha de Ingreso: mayo-2011
Ubicación: Palma de Mallorca
Mensajes: 108
Antigüedad: 7 años, 6 meses
Puntos: 4
Respuesta: Problema con menu

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.

Última edición por tonigomila1988; 16/03/2018 a las 07:47
  #8 (permalink)  
Antiguo 16/03/2018, 10:15
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Problema con menu

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
  #9 (permalink)  
Antiguo 19/03/2018, 07:06
 
Fecha de Ingreso: mayo-2011
Ubicación: Palma de Mallorca
Mensajes: 108
Antigüedad: 7 años, 6 meses
Puntos: 4
Respuesta: Problema con menu

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.
  #10 (permalink)  
Antiguo 20/03/2018, 22:16
 
Fecha de Ingreso: enero-2011
Ubicación: Zaragoza
Mensajes: 90
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Problema con menu

Bootstrap 4

Etiquetas: auto, navbar
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




La zona horaria es GMT -6. Ahora son las 06:15.