joshuaaron joshuaaron - 2 months ago 19
Sass (Sass) Question

dropdown menu pushing down content. max-height toggle

I'm toggling a class of open to change the max height of my UL element to show and hide the nav.

I'm not completely understanding why but this line

.navbar--upper,
.navbar--lower {
height: 50px;
}


is screwing with the content not bring pushed down.

I have included a jsfiddle link to demonstrate this
https://jsfiddle.net/h1hpLvs3/
Probably a really simple explanation but can someone shine some light?

Also, if there is a better way to do this please feel free to add some constructive criticism or ideas.

Answer

Using 'min-height: 50px' does not have the same result. The child elements are 'overflowing' the parent container with a fixed height, giving you some options to handle them. Like hiding those elements if you'd like. Min height allows the parent to expand with the children. It is the parent container which pushes it's siblings down.

for likely desired effect?

.navbar--upper,
.navbar--lower {
    min-height: 50px;
}

fixed height but hide the children, (keep them safe from danger) just for example

.navbar--upper,
.navbar--lower {
    height: 50px;
    overflow: hidden;
}