Can't make nav bar links include space around text

HTML-CSS
1

What I am trying to accomplish in the nav bar:

  • logo on left
  • text links on right
  • all vertically centered
  • for each element, the entire height of the nav bar is a clickable link

I’ve been trying to do this with a flex-box.

I’ve accomplished the first three but not the last.

<ul class="navigation">
            <li><a href="#"><img class="logo" src="logo.png" alt="logo"></a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

CSS:
.navigation {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
list-style: none;
margin: 0;
background-color: hsl(302, 47%, 12%);
padding-left: 0;
padding-right: 40px;
align-items:center;
height: 100px;
}

.logo {
height: 58px;
}

.navigation li:first-child {
margin-right: auto;
}

.navigation a {
color: rgb(212, 212, 212);
padding-left: 1em;
padding-right: 1em;
text-decoration: none;
display: block;
font-size: 18px;
}

When I mouse over a link area, it only includes the space directly over the text and logo.
temp

How can I have the clickable area span the entire height of the nav bar?

2

Why do I always seem to finally find an answer after posting? :joy:

I discovered a solution:
In the .navigation a element >>
Instead of:
display: block;

Add:
display: flex;
align-items: center;

3

Glad you figured it out!

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.