CODEWITHSUNDEEP
htmlcss
anais1477
anais1477

Reputation: 496

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 ? :/

Upvotes: 0

Views: 2154

Answers (4)

yasarui
yasarui

Reputation: 6563

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;
}

Upvotes: 1

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Try using max-width property and display:inline-block; and remove line-height on anchor tag

CSS

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

.nav-top-home-page nav li a {
    color: white;
    font-size: 1em;
    padding: 5px 15px;
    cursor: pointer;
    font-family: Raleway, arial;
    color: #212121;
    max-width: 180px;
    display: inline-block;
}

Upvotes: 0

Prasanga
Prasanga

Reputation: 1038

Try with this, Use display:table-cell Here is code

Upvotes: 1

Cătălin Costan
Cătălin Costan

Reputation: 93

Wrap them inside divs as such

<div>Vous êtes</div> <div>GESTIONNAIRE</div>

Upvotes: 0

Related Questions