Why doesn't nav height automatically adjust to its content? - html

Question

I have the following nav element in my html:
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
My CSS design for the normal size of the homepage looks like this:
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
This works perfectly fine. However, for smaller displays, I want to display the navigation items vertically, so I have the following CSS code:
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
Here is the problem: The height of my nav element in this case is set to auto. If I set a fixed value, it displays correctly. However, I want to adjust it automatically to the size of the content. Problem is, that with height set to auto, the nav element completely vanishes to zero height. How can I set it, so it's height is adjusted by the elements it contains?
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>

Answer 1

Problem is, that with height set to auto, the nav element completely vanishes to zero height. How can I set it, so its height is adjusted by the elements it contains?
This problem is occurring because your ul element has position: absolute. Because of this property, your ul element is no longer "living" in the same space of the normal document layout.
To fix this, you can add this to your media query:
#media screen and (max-width: 1000px) {
nav ul {
position: relative;
/* ... */
}
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
position: relative; /* Add this */
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
<nav>
<ul>
<li>
Unternehmen
<div class="navunderline"></div>
</li>
<li>
Leistungen
<div class="navunderline"></div>
</li>
<li>
Referenzen
<div class="navunderline"></div>
</li>
<li>
News
<div class="navunderline"></div>
</li>
<li>
Kontakt
<div class="navunderline"></div>
</li>
</ul>
</nav>