0

So i was looking at https://youtu.be/8gNrZ4lAnAw?t=8831 to learn how to do repsonsive sites, at step 2:27:11 he creates the navigation by

Edit: Forgot to mention, it's mobile first, so the below css is for width > 1024, the mobile css is this:

nav ul {
    position: fixed;
    width: 60%;
    top: 0;
    right: 0;
    text-align: left;
    background-color: rgba(36,41,44);
    height: 100%;
    z-index: 7;
    padding-top: 3em;
}

1024 css

nav ul {
        /* NOTE position fixed to reset */
        position: inherit;
        width: auto;
        background: none;
        display: flex;
        padding-top: 0;
    }

    nav ul li {
        float: left;
    }

I don't understand why flex on the ul didn't work, that you still need to float the list item? If anyone knows what's going on that would be really helpful.

edit: html

<nav>
                <a href="#" class="hide-desktop">
                    <img src="images/ham.svg" alt="toggle menu" class="menu" id="menu" />
                </a>
                <ul class="show-desktop hide-mobile">
                    <li id="exitMenu" class="exit-btn hide-desktop"><img src="images/exit.svg" alt="exit menu"></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
4
  • you don't need float, you can remove it May 3, 2020 at 19:35
  • @TemaniAfif hi i just edited the question, apparently if float gets removed it doesn't work
    – yc_l
    May 4, 2020 at 14:26
  • share you html code so we can verify this May 4, 2020 at 14:28
  • @TemaniAfif added
    – yc_l
    May 5, 2020 at 18:33

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.