CODEWITHSUNDEEP
htmlcss
supernova
supernova

Reputation: 127

Position: absolute breaks margin-left: auto

I am trying to position my hamburger menu on the right side of my nav using margin-left: auto and display: flex on the container. When I give the nav position:absolute, it breaks. What do I need to do?

HTML

<section class="nav">
    <div class="nav-items">
        <a href=""><h2 class="logo">logo</h2></a>
        <div class="hamburger">
            <div class="hamburger-lines"></div>
        </div>
    </div>
</section>

CSS

.nav {
    position: absolute;
}
.nav-items {
    display: flex;
}
.hamburger {
    margin-left: auto;
}

Upvotes: 0

Views: 151

Answers (1)

Ray Caballero
Ray Caballero

Reputation: 443

It breaks because you are not setting a width. Try setting the width to something like 100%

.nav {
    position: absolute;
    width: 100%;
}

Upvotes: 1

Related Questions