Header navigation style

Navigation
0

I have this error, and that is that passive housing I can not put it in a line, I always leave it separate, the house is that neither giving it width or anything with it to fix it, any suggestions?

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>
    
asked by 19.07.2018 в 09:37
source

3 answers

1

Add the property white-space: nowrap; within .menu a and forces it to always come out in one line, another thing is that it fits ...

    
answered by 19.07.2018 / 10:03
source
1

The problem you have is very simple:

You have a <nav id="nav" class="menu"> that will always occupy 70% of the screen. So everything inside is going to be dynamic in size!

The menu physically by the text occupies a minimum space and for large screens is redirected, now when trying to reduce the space when the screen (browser window) is smaller than expected, the word composed "Passive Housing" is divides dynamically in an attempt to fulfill your condition of 70% of the screen. To fix it you have a property white-space: nowrap; that avoids this situation and that can add to .menu.

If you do not want to remove this precondition, you only have to add a decorator indicating that this compound word is not dynamically managed its size: 

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

Here is an example for you to try.

    
answered by 19.07.2018 в 10:04
0

Another thing is that it fits ... but it adds the property white-space: nowrap; within .menu and forces to always come out in a line,

    
answered by 19.07.2018 в 10:04
insert data at the start in a field already created in sql primefaces hide column in excel p: dataExporter