Does anyone have a solution for how to make the links inside the div.topbar take up the full height of the container, especially when they are hovered over?
I've extracted this specific feature and shared it [here][1]. I'm not sure if there's a better way to explain it.
div.topbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
background-color: white;
border-bottom: 1px solid black;
}
div.topbar #logo {
background: repeating-linear-gradient(45deg, yellow, black 10px);
color: white;
padding: 15px;
font-size: 2em;
text-shadow: 3px 3px 3px purple;
}
div.topbar a {
color: black;
text-decoration: none;
font-weight: bold;
display: inline-block;
padding: 15px;
}
div.topbar a:hover {
background-color: #ccc;
color: green;
}
div.topbar a a:nth-child(3) {
border-right: none;
}<header>
<div class="topbar">
<a href="#a" id='logo'>jS.tut</a><a href="#b">More Tuts</a><a href="#c">Home</a>
</div>
</header>