I'm currently working on designing a header with three main elements:
----------
LOGO
---------- hidden navigation bar
----------
BUTTON
----------
This header layout is supposed to grow into the following structure:
----------
LOGO
----------
li
li
li
li
----------
BUTTON
----------
My goal is to keep the logo and button vertically centered, allowing any expansion or movement to occur downwards from the top of the button or bottom of the logo container. While I have achieved this without using flexbox, I am interested in utilizing it for a better understanding of why it's not functioning as intended.
Currently, when the menu expands, it moves upwards instead of just downwards unless I artificially increase the height of the logo container, which seems like a workaround. I would prefer to employ justify-content: space-around, but that also allocates some space to the hidden menu.
I suspect that using flex-shrink might provide a solution, but being relatively new to these concepts, I haven't been able to make it work yet. Here's what I've tried so far:
https://codepen.io/nwoodward/pen/RMrRVZ
$('#button').click(function() {
$('.menu').toggleClass('menu--open', 700);
})header {
background: #808080;
display: flex;
flex-direction: column;
min-height: 100px;
}
#logo-container {
display: block;
flex-grow: 2;
background: red;
width: 100%;
height: 50px;
text-align: center;
}
#logo-container img {
height: 40px;
}
.menu {
height: 0px;
overflow: hidden;
background-color: green;
}
.menu--open {
height: auto;
}
#button {
background: blue;
width: 100%;
height: 20px;
text-align: center;
cursor: pointer;
}
#rest {
height: 500px;
background: #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="logo-container">
<img src="https://trellis.co/wp-content/uploads/2015/09/hidden_meanings_facts_within_famous_logos_cover_image.jpg">
</div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
<div id="button">Click Me</div>
</header>
<section id="rest">