I am looking to create a dynamic header that adjusts based on the height of the svg logo and available width for the navigation:
layout1: https://i.sstatic.net/Oa8gB.png
If there is not enough space for all navigation buttons (a) to fit in one row next to the svg, then the nav block should move below the svg and take up the full width:
layout2: https://i.sstatic.net/2avAA.png
It's crucial that the nav block aligns to the bottom right corner of the parent header element.
I have researched, Googled, tried different methods but haven't found a satisfactory solution. Any suggestions using flexbox? Please, no JavaScript as I prefer to keep it pure.
Edit: This is my attempt so far: http://codepen.io/Kleajmp/pen/dYEeKW
html:
<header>
<div id="logo" class="col-3"><img src="http://www.dsunits.be/v4/img/DS_units.svg"></div>
<nav>
<a href="#">DS units</a>
<a href="#">button2</a>
<a href="#">button3</a>
<a href="#">button4</a>
<a href="#">button5</a>
<a href="#">button6</a>
<a href="#">button7</a>
<a href="#">button8</a>
</nav>
</header>
css:
header{ display:flex; align-items:flex-end; justify-content:space-between; }
div#logo{ display:inline-flex; align-items:flex-start; width:25%; }
div#logo img{ max-height:150px; }
nav{ display:inline-flex; cursor:pointer; }
nav a{ display:inline-flex; flex-wrap:nowrap; }
nav a:hover{ color:white; background-color:#0099cc; border-top-right-radius:0.5rem; }