CODEWITHSUNDEEP
htmlcssflexbox
Mike Sav
Mike Sav

Reputation: 15311

Responsive Menu - Show Hamburger or Cells depending on screen width with Flex Box

I'm currently trying to upgrade my HTML and CSS skills by producing a Responsive Navigation Menu and I think I have got into a bit of a mess - here's my problem: when my page width is greater than 768px I wish to hide the div with the class "menu__hamburger" and show an unordered list of items with a DIV with the class "header__navigation". Should the page width be less than 768px I wish to show the div with the class "menu__hamburger" but drop the div "menu__hamburger" so it fills the whole width of the parent DIV with the class header.

Permit me to demonstrate with some images:

Layout greater than 768px

enter image description here

Layout less than 768px (notice how the header__navigation drops to the next row)

enter image description here

The reason I want to show the header__navigation currently is because I am styling the header__navigation. Later I wish to use a hidden checkbox to toggle the display of the header__navigation using css when the user clicks the div with the menu__hamburger class. However I think I have structured my HTML badly as I cannot get the header__navigation to "drop" and "take up a full row".

Here is my HTML so far (a jsbin is here: https://jsbin.com/wecemiyepe/edit?html,css,output):

<div class="header">
    <div class="header__logo">
        <img src="brand-logo.png">
    </div>
    <div class="menu__hamburger">
        <label for="menuToggle">&#9776;</label>
        <input type="checkbox" id="menuToggle">
    </div>
    <div class="header__navigation">
        <ul class="menu">
            <li class="menu__item">Home</li>
            <li class="menu__item">Company</li>
            <li class="menu__item">Services</li>
            <li class="menu__item">Products</li>
            <li class="menu__item">Careers</li>
            <li class="menu__item">Contact</li>
        </ul>
    </div>
</div>

Here is my CSS

.header {
    display: flex;
    background-color: black;
    border-bottom: 1px solid white;
    align-items: center;
}

.header__logo {
    flex: 0 1 30%;
    padding: 10px 20px;
}

.header__navigation {
    flex: 1 1 auto;
    align-items: flex-end;
    padding: 10px 20px;
}

.menu {
    margin: 0;
    padding: 0;
    color: white;
    list-style: none;
    display: flex;
}

.menu__item {
    flex: 1 1 auto;
}

.menu__hamburger {
    color: white;
    display: none;
}

input[type=checkbox] + label {
    display: none;
}


@media only screen and (min-width: 320px) and (max-width: 768px) {

    .menu__hamburger {
        color: white;
        display: flex;
        justify-content: flex-end;
        font-size: 40px;
    }

    input[type=checkbox] {
        display: none;
    }

    /*
    ToDo - toggle display of  .menu if is checked
    input[type=checkbox]:checked
    */

    .menu {
        /* display: none; */
        flex-direction: column;
        flex: 1 0 100%;
    }

    .menu__item {
        text-transform: uppercase;
        border-bottom: 1px solid #fff;
        padding: 10px;
    }
}

I'll continue to persevere with my code but if someone can give me a tip to get this working I will be most appreciative. Once again here is a link to a JSbin with the code: https://jsbin.com/wecemiyepe/edit?html,css,output

Upvotes: 0

Views: 1816

Answers (2)

jorscobry
jorscobry

Reputation: 123

I'm not sure if I totally understand your ask, but it seems like you are looking to put your navigation into a hamburger menu on smaller screens. I could type out the code but there is a pretty clear explanation on w3schools on how to create this. Hope this helps! 👍

Upvotes: 0

Nakov
Nakov

Reputation: 58

So first why you need that (min-width: 320px)?

Better delete it, and you want when the user click on the hamburger menu , the unordered list to be displayed?

Upvotes: 0

Related Questions