anais1477 anais1477 - 3 years ago 78
CSS Question

Nav bar on 1 line but one element on 2 lines

I would like to put an element of my nav bar on two lines.

But when I just add a

<br />
inside, it breaks everything.

Here is what I want :
enter image description here

Here is what I have :

enter image description here

Here is my html code:

div class="nav-top-home-page">
<nav>
<div>
<div>
<a><img class="logo" src="./assets/img/logo.png" height="200px"></a></div>
<ul>
<li><a>BLOG</a></li>
<li><a>CONTACT</a></li>
<li><a (click)="openLoginModal()"><img src="./assets/img/LOCK.png"/>ME CONNECTER</a></li>
<li><a id="subscribe" routerLink='./register'>M'INSCRIRE</a></li>
<li id="nav-gestionnaire"><a>Vous ĂȘtes <br/> GESTIONNAIRE ?</a></li>
</ul>
</div>
</nav>
</div>


Here is my css code :

.nav-top-home-page{
height:600px;
position: relative;
z-index: 5;
background-color: #6f8ab1;
text-align: center;
}

.nav-top-home-page::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(assets/img/home/slide1.png) white center top no-repeat;
background-size: cover;
}

.nav-top-home-page nav div{
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
}

.nav-top-home-page nav .logo{
float:left;
}

.nav-top-home-page nav ul{
padding: 0px;
margin: 0px;
float: right;
}

.nav-top-home-page nav li{
display: inline;
}

.nav-top-home-page nav li a{
color: white;
font-size: 1em;
line-height: 70px;
padding: 5px 15px;
cursor: pointer;
font-family: Raleway, arial;
}

.nav-top-home-page nav li {
cursor: pointer;
}

#nav-gestionnaire{
display: inline;
}


I tried changing the
width
, or adding
whitespace: nowrap
and many other things, but nothing worked.

Can someone help me pls ? :/

Answer Source

Remove line-height property and add display:inline-block on anchor tags

.nav-top-home-page nav li a{
  font-size: 1em;
  padding: 5px 15px;
  cursor: pointer;
  font-family: Raleway, arial;
  display:inline-block;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download