0

Tengo este error, y es que vivienda pasiva no consigo ponerlo en una linea, me sale siempre separado, el casa es que ni dandole width ni nada consigo arregrarlo, ¿alguna sugerencia?

introducir la descripción de la imagen aquí

CSS

.menu {
        position: relative;
        width: 70%;
        height: auto;
        transform: translateX(0%);
        float: right;
        display: table;
        top: 22px;
    }

    .menu a {
        font-family: Arial, Helvetica, sans-serif;
        color: rgb(227, 30, 36);
        font-size: 12px;
        border: none;
        text-decoration: none;
        text-transform: uppercase;
        background-color: #fff;
        transition: .5s;
        display: table-cell;
        vertical-align: middle;
    }

    .menu a.active,
    .menu a:hover{
        color: #fff;
        background: rgb(227, 30, 36);
    }

HTML

<header>
    <div class="contenedor">
        <a href="./index.php"><div class="logo"></div></a>
        <input type="checkbox" id="menu-bar">
        <label id="etiqueta-menu" onclick="javascript:changeClass();" class="fas fa-bars" for="menu-bar"></label>
                <nav id="nav" class="menu">
                    <a href="index.php?option=inmobiliaria">Inmobiliaria</a>
                    <a href="index.php?option=constructora">Constructora</a>
                    <a href="index.php?option=viviendapasiva">Vivienda Pasiva</a>
                    <a href="index.php?option=eficiencia">Eficiencia</a>
                    <a href="index.php?option=montes">Montes</a>
                    <a href="index.php?option=seguros">Seguros</a>
                    <a href="index.php?option=contacto">Contacto</a>
                </nav>
    </div>

    <div class="social-bar">
    <a href="" class="icon icon-facebook" target="_blank"></a>
    <a href="#" class="icon icon-envelop" target="_blank"></a>
    <a href="#" class="icon icon-whatsapp" target="_blank"></a>
  </div>
</header>
1
  • Así a simple vista si en el css le pones a la clase menu el width: auto en lugar de poner 70% debería ponerse en una línea.
    – DevCodeG
    Commented el 19 jul. 2018 a las 7:53

3 respuestas 3

2

Añade la propiedad white-space: nowrap; dentro de .menu a y fuerzas a que salga siempre en una linea, otra cosa es que te quepa...

1
  • ya me lo habia comentado otro compañero y me cabe sin problema!!
    – user75193
    Commented el 19 jul. 2018 a las 8:10
1

El problema que tienes es muy simple:

Tienes un <nav id="nav" class="menu"> que va a ocupar siempre el 70% de la pantalla. Por lo que todo lo que esté en su interior va a ser de tamaño dinámico!

El menú fisicamente por el texto ocupa un espacio minimo y para pantallas grandes se va redireccionando, ahora al intentar reducir el espacio cuando la pantalla (ventana de navegador) es mas pequeña de lo esperado, la palabra compuesta "Vivienda Pasiva" se divide dinámicamente en un intento de cumplir con tu condición del 70% de la pantalla. Para solucionarlo tienes una propiedad white-space: nowrap; que evita esta situación y que puede añadir a .menu.

Si no quieres quitar esta condición previa, solo tienes que añadirle un decorador indicando que esta palabra compuesta no se gestione dinámicamente su tamaño:

<div style="width: 105px;">
    <a href="index.php?option=viviendapasiva">Vivienda Pasiva</a>
</div>

Aquí te dejo un ejemplo para que lo pruebes.

1
  • 1
    también correcto! mil gracias compañero!
    – user75193
    Commented el 19 jul. 2018 a las 8:09
1

añade la propiedad white-space: nowrap; dentro de .menu a y fuerzas a que salga siempre en una linea,

1
  • mil gracias!!! Funciona a la pefección!!
    – user75193
    Commented el 19 jul. 2018 a las 8:09

Tu Respuesta

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