CODEWITHSUNDEEP
htmlcssnavbarhamburger-menu
Kasia
Kasia

Reputation: 118

CSS hamburger menu doesn't transform correctly on a bigger screen

I have a CSS hamburger menu which should display on screens up to 525px big. After that size, the hamburger menu should transform into a normal menu, made out of 4 links, floated to the right of the page while the logo being floated to the left. Here's the complete code: https://codepen.io/Cilvako/pen/zjvBrE

<div class="nav">

         <h1>Zero Gravity</h1>

         <label for="toggle">&#9776</label>

         <input type="checkbox" id="toggle"/>

       <div class="menu">
           <a href="#">About Us</a>
           <a href="#">Contact</a>
           <a href="#">Blog</a>
           <a href="#"><span>Free Trial</span></a>
       </div>

    </div>

Although I make the containing div of the 4 links display: inline-block it still takes the whole width of the div, displaying under the h1 (logo).

How can I make the h1 and the menu (.menu) display next to eachother, having the same height? I'm really out of ideas.

Upvotes: 0

Views: 234

Answers (2)

stove
stove

Reputation: 576

Actually, in this case, the culprit is clear: both along with width: 100% on .menu selector.

You should get rid of the width: 100% and you can use clear: right (that's where you should want to do the clearing).

I would recommend to drop the float entirely (remove float: left, clear: both and width: 100% from .menu and remove float: right from the media query .menu. It works this way nicely.

As a matter of fact, use float as a last resort or only if you are sure that it is the right use case. Float is tricky unless you understand it completely and in most cases there are better methods to achieve your goal.

Also I would recommend you to take a look at flexbox for layouting purposes as well as css grid. The latter only working in modern browsers right now (i think edge is still having problems, IE doesn't and will not be able to handle it ever).

Upvotes: 1

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

Try this

CSS

@media only screen and (min-width: 525px)
.menu {
    text-align: right;
    display: inline-block;
    float: right;
    width: auto;
    clear: none;
}

Upvotes: 2

Related Questions