CODEWITHSUNDEEP
htmlcss
hhherzblut
hhherzblut

Reputation: 39

How to align a two line nav-item vertically?

I want to create a nav menu with items that can have one or two lines.

enter image description here

They should have the same height and the text should be vertically centered. Oh and of course the whole box should be clickable not only the text.

I tried it but the only clickable area is the text.

   

header .nav {
  position: absolute;
  top: 66px;
}
header .nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
header .nav ul li {
  list-style: none;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 80px;
  font-family: 'Muli', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1em;
  border: 1px solid #fff;
  overflow: hidden;
  background-color: blue;
}
header .nav ul li a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  text-decoration: none;
  color: #1e1e1e;
  padding: 10px 32px;
  display: block;
}
header .nav ul li:hover {
  border: 1px solid #1e1e1e;
}
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Two Line<br>Nav Item</a></li>
  </ul>
</div>

Upvotes: 0

Views: 62

Answers (2)

Thanveer Shah
Thanveer Shah

Reputation: 3333

Okay here you go, Remove you whole CSS and paste this, This will do everything you have asked.

CSS

header .nav {
  position: absolute;
  top: 66px;
}
header .nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
header .nav ul li {
  list-style: none;
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 80px;
  font-family: 'Muli', sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1em;
  border: 1px solid #fff;
  overflow: hidden;
  background-color: dodgerblue;
}
header .nav ul li a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  text-decoration: none;
  color: #1e1e1e;
  padding: 10px 32px;
  display: block;
  text-align: center;
  color:white;
}
header .nav ul li:hover {
  border: 1px solid #1e1e1e;
}

HTML

<header>
    <div class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Two Line<br>Nav Item</a></li>
      </ul>
    </div>
 </header>

The text is vertical and the whole box is clickable

Upvotes: 1

Anis R.
Anis R.

Reputation: 6922

To make the entire box clickable, try inserting the whole li element in the a tag, like so:

<a href="#"> <li>Two Line<br>Nav Item</li> </a>

(Assuming it's your li that has a black border).

Upvotes: 0

Related Questions