CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Sticky Footer with Flexbox

Posted by Bhushan Manoharan
Bhushan Manoharan
5,758 Points

Can we create a sticky header with navigation just like relative and absolute position using flexbox method?

In CSS basic course, we created sticky header with absolute and relative positioning and adding z-index if images overflow the header. Is it possible to create similar design with flexbox model?

2 Answers

John Shockey
John Shockey
45,061 Points

Yes! Here is a basic example of a sticky header that uses flexbox:

<style>
    body {
        margin: 0;
        padding: 0;
    }

    .header {
        position: fixed;
        display: block;
        width: 100%;
        background: red;
        z-index: 1000;
    }

    @media screen and (min-width: 590px) {
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .logo {
        width: 175px;
        height: 65px;
        margin: 10px auto;
        background: black;
    }

    @media screen and (min-width: 590px) {
        .logo {
            margin-left: 10px;
        }
    }

    .nav {
        margin: 0 auto;
        padding-bottom: 10px;
        font-family: sans-serif;
        font-size: 14pt;
        text-transform: uppercase;
        text-align: center;
    }

    @media screen and (min-width: 590px) {
        .nav {
            margin-right: 25px;
            padding-bottom: 0;
        }
    }

    .nav-item {
        padding: 5px;
        color: black;
        text-decoration: none;
    }

    .nav-item:hover {
        color: white;
    }
</style>
<header class="header">
    <div class="logo"></div>
    <nav class="nav">
        <a class="nav-item" href="">home</a> |
        <a class="nav-item" href="">about</a> |
        <a class="nav-item" href="">work</a> |
        <a class="nav-item" href="">contact</a>
    </nav>
</header>

Check out this link for all the great options flexbox includes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I hope this answers your question!

Bhushan Manoharan
Bhushan Manoharan
5,758 Points
Bhushan Manoharan
Bhushan Manoharan
5,758 Points

Thanks John. I will try to mess around with this code and see if everything is fluid. :)