Search code examples
csscss-position

nav (with some buttons positioned right) at bottom of div

I'm trying to achieve a menu very similar to the one here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav_right

except - I want it to be at the bottom of a div. (If you can imagine an image box that has that kind of nav bar at the bottom - with the image on the layer below the menu because I might want it to show through a partial opacity).

I thought it would be very simple with a bit of absolute and relative positioning. But I'm getting really messed up, with the contents of the nav being moved about, and the buttons to the right moving left.

Solution 
  • <header>
    <nav class="main">...</nav>
    <nav class="sub">...</nav>
</header>

    just apply space-between to header element:

    header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}