1

Tengo el siguiente problema: cree un menú de navegación, este tiene un ancho de 100%-1000px, la cosa es que cuando quiero poner que este menú se quede estático(position:fixed)el ancho del menú aumenta y obtiene más de 1000px, cuando le quieto el position:fixed vuelve a su estado normal, ¿por qué sucede esto?

/*MENÚ DE NAVEGACIÓN*/
.cabecera{
	width: 100%;
	background:aqua;
	margin-bottom: 1%;
	position: fixed;
	top: -15px;
}
.cabecera h1{
	display: inline;
	margin-right: 25%;
	margin-left: 12%;
	color: rgba(18,54,78,1);
	padding-bottom: 1%;
}
.lista{
	padding-top: 0;
}
.lista li{
	display: inline;
	list-style: none;
}
.lista li a{
	text-decoration: none;
}
.lista li:hover{
	background: blue;
}
<nav class="cabecera">
		<ul class="lista">
			<h1>CAMILO</h1>
			<li><a href="index.html#seccion_baner">Inicio|</a></li>
			<li><a href="index.html#seccion_sobremi">Acerca de mí|</a></li>
			<li><a href="index.html#seccion_servicios">Servicios|</a></li>
			<li><a href="index.html#seccion_portafolio">Portafolio|</a></li>
			<li><a href="index.html#seccion_contacto">Contacto</a></li>
		</ul>

6
  • El nombre Camilo debe aparecer a lado de los items del menú?
    – user128299
    Commented el 24 nov. 2019 a las 19:36
  • He editado el snippet porque tenias el código puesto en los bloques equivocados y no se visualizaba el ejemplo. Lo que comentas en tu pregunta no se corresponde con el código que has puesto en el código, tienes un ancho de 50% y se muestra igual con el fixed o sin él.
    – user7176
    Commented el 24 nov. 2019 a las 19:49
  • Sip, porque estaba probando cambiándole el ancho, pero de igual forma si lo cambio al ampliar la página o al volverla pequeña se modifica . El nombre debe ir al lado de la lista. Commented el 24 nov. 2019 a las 20:02
  • 1
    No entiendo a qué te refieres, no veo nada raro al redimensionar la ventana
    – user7176
    Commented el 24 nov. 2019 a las 20:52
  • 1
    No entiendo realmente cual es tu problema. Tienes position:fixed y width: 100% por lo que el encabezado te va a ocupar todo el espacio. No veo por ninguna parte el -1000px que comentas en el enunciado. Commented el 25 nov. 2019 a las 12:40

4 respuestas 4

1

Puedes probar del modo siguiente (No se si sea la mejor opción claro esta):

  • Al contenedor le aplicas la propiedad de position: fixed;, eso hará que su ancho se modifique
  • Aplicas un ancho mínimo de 100% al contenedor de los elementos del menú para hacer que de nuevo se extienda a lo máximo de la ventana
  • Preferí modificar en algo el código indicando que su display: flex;
  • Hago uso de align-items para alinear verticalmente los elementos dado que tendrán una disparidad con respecto del h1

Código propuesto

<style>
  .cabecera__menu {
    display: flex;
    background-color: red;
    position: fixed;
    min-width: 100%;
    margin: 0px;
    align-items: center;
  }
  .cabecera__elemento {
    list-style: none;
    padding-right: 10px;
  }
  .cabecera__titulo {
    padding-right: 20px;
    margin: 0px;
  }
  a {
    text-decoration: none;
  }
  @media screen and (max-width: 530px) {
    .cabecera__menu {
      flex-direction: column;
    }
  }
</style>

<nav class="cabecera">
        <ul class="cabecera__menu">
            <h1 class="cabecera__titulo">CAMILO</h1>
            <li class="cabecera__elemento"><a href="">Inicio|</a></li>
            <li class="cabecera__elemento"><a href="">Acerca de mí|</a></li>
            <li class="cabecera__elemento"><a href="">Servicios|</a></li>
            <li class="cabecera__elemento"><a href="">Portafolio|</a></li>
            <li class="cabecera__elemento"><a href="">Contacto</a></li>
        </ul>
    </nav>
0

position:fixed hace que los tamaños de tu elemento vayan en relación a toda tu pantalla, si tienes que de ancho mide 100%, el elemento abarcará toda la pantalla. Podrías intentar poner un ancho de 10% para lo que necesitas.

5
  • La cosa es que modifico el tamaño para un tamaño fijo, osea modifico el ancho para que se ajuste a lo que necesito pero cuando utilizo el zoom este tamaño se modifica y queda feo Commented el 24 nov. 2019 a las 20:26
  • En ese caso, deberías usar position: absolute, para que tu barra de navegación se quede con el tamaño que tu quieres. Commented el 24 nov. 2019 a las 20:31
  • Pero no se quedaría estática al bajar el mause. Commented el 24 nov. 2019 a las 20:34
  • Lo único que me imagino sería adaptar a través de media para cada pantalla. ¿Qué piensas? Commented el 24 nov. 2019 a las 20:36
  • Tu menú lateral será absolute, y para todo lo que este de lado, podrías hacer de ese espacio un div con la propiedad overflow-y: scrollbar, y ahi metes todo lo que gustes y solo a ese espacio se le hará scroll Commented el 24 nov. 2019 a las 20:39
0

No entiendo porque querrías hacer un "menu/cabecera" del 100% - 1000px, pero en cualquier caso este supuesto no figura en tu css si quiersieras de verdad hacer algo así una manea de hacerlo es mediante un cálculo del width:

 .cabecera {
    width: calc(100% - 1000px);
  }

Un mejor manera de darle un ancho bien proporcionado sería darle un porcentaje del total de la pantalla teniendo en cuenta las necesidades de las @media para todos los dispositivos, o en su defecto una ancho cerrado en píxeles, aunque esto útlimo no te lo recomiendo por su alta probabilidad de romper.

0

Pensemos que tu pantalla tiene 1000px de ancho.

En un elemento normal, un ancho de 100% sería el 100% disponible de su elemento padre (en este caso el <body>). Ese 100% disponible es 1000px menos los márgenes, que si no están explícitos en la hoja de estilos los define el navegador y es por defecto de 8px en Chromium y Firefox. En otras palabras, estamos hablando de 984px.

Un elemento con posición fixed pasa por alto ciertos atributos que en otro caso heredaría de sus nodos padres. En tu caso, pasa por alto el ancho disponible del body y ocupa los 1000px de la ventana.

Peeero, como no le dijiste explícitamente que se ubicara en left:0, sí se ubica acorde a la posición que le sugiere el body. A 8px del borde izquierdo. En comparación con el layout original, se te escapa por el borde derecho en 16px.

Solución:

.cabecera{
    background:aqua;
    margin-bottom: 1%;
    position: fixed;
    left:0;
    right:0;
    top: -15px;
}

Si le dices left:0 y right:0 necesariamente es el 100% del ancho. También podrías decirle left:0 y width:100%, pero cuando se trabaja con elementos fijos las dimensiones porcentuales pueden ser engañosas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.