I'm struggling to make the parent div adjust its height based on the padding I add to the "a" element. This is causing an issue in my hamburger navbar menu where I want the expanded navbar to match the height set by the padding on the "a" tag.
<div id="side-menu" class="side-nav" v-bind:class="{'side-menu-open': isOpen}">
<ul class="side">
<li class="side"><a href="#">Home</a></li>
<li class="side"><a href="#">About</a></li>
<li class="side"><a href="#">Projects</a></li>
<li class="side"><a href="#">Contact</a></li>
</ul>
</div>
li.side {
display:inline-block;
margin-right: -4px;
}
li.side a {
padding: 3em 2em;
border-bottom: 1px solid #333;
display: block;
color: #fff;
text-decoration: none;
transition: 0.3s ease;
}
li.side a:first-child {
border-top: 1px solid #333;
}
li.side a:hover {
background-color: #333;
transition: 0.3s ease;
}
.side-nav {
transition: 0.4s;
background-color: #222;
width: 100% !important;
height:0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
}
.open {
transition: 1s;
}
.side-menu-open {
height: 70px !important;
}
.open-slide {
transition: 0.4s;
}
.open-slide:hover {
cursor: pointer;
}