HTML CSS Javascript汉堡菜单问题

Question

would someone mind looking at a website please? The address is test.dvps.uk/index.html

I'm having issues with the Hamburger Menu, its in a 50% column and I want it right aligned. I've tried align content, floating and different position and displays but can seem to get it right. The other problem i'm having is that when the menu is toggled, it expands but pushes the content down of the container below but I want it to move the container too.

I'm sure that my tinkering to align the menu has caused this issue, so before I break it any further would you mind helping, please? Thank you :)

 $(document).ready(function() { $(".hamburger").click(function() { $(".nav").slideToggle("slow"); }); }); 

 *, *:before, *:after { box-sizing: inherit; } * { margin: 0; padding: 0; border: none; } html { box-sizing: border-box; } body { font-family: "Arial"; font-size: 1.2em; } .container { margin: 0 auto; padding-top: 10px; max-width: 1000px; } .container-bottom-pad { margin: 0 auto; padding-top: 10px; max-width: 1000px; padding-bottom: 80px; } .outerContainer { background-color: #F1F1F1; } .row::before, .row::after { display: table; content: " "; clear: both; } .row { padding: 10px 0; } .one, .one-third, .two-thirds, .one-fourth { width: 100%; } #headerAndNav { background-color: rgba(135, 196, 66, 0.60); margin-bottom: 10px; } header img { z-index: -2; position: absolute; width: 20%; margin: 0 auto; } .header-logo { position: relative; height: 100px; width: auto; } .nav { display: none; padding: 0; overflow: hidden; /* Makes the sliding animation cleaner */ } .nav-item { list-style-type: none; text-align: center; background: #87c442; display: block; margin: 12px 0; padding: 10px 20px; border-radius: 5px; box-shadow: 0px 6px #2c3e50; } .nav-link { text-decoration: none; color: #333; } .nav-item:active { box-shadow: none; transform: translate(0px, 6px); transition: transform .20s; } .hamburger span { display: block; width: 35px; height: 4px; background: #625948; margin: 5px 0px; padding: 0; } .hamburger:hover span { transition: background ease-in-out .25s; background: #87c442; } .hamburger:hover { cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container" id="headerAndNav"> <div class="row"> <header> <div class="eleven-twelths column"> <nav> <span class="flex-container"> <div class="align"> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="signup.html">Signup</a> </li> <li class="nav-item"> <a class="nav-link" href="successes.html">Successes</a> </li> <li class="nav-item"> <a class="nav-link" href="prices.html">Prices</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> </ul> </div> </span> </nav> </div> <div class="one-twelth column"> <img alt="logo" class="header-logo" src="images/site/opaque-logo.png"> </div> <!-- end of one-twelth--> </div> <!-- end of row --> </header> </div> <!-- end of container --> 

Answer 1

Well, if you want a brute force solution, just do this in the CSS file:

.hamburger { position:fixed; top: 25px; right: 30px; }

This will take the hamburger div out from the document flow and it will always stick to the given position.

I see a couple other issues arising on the horizon, but keep going.

And take the whole align div out of the HTML.

Answer 2

After looking the adress you mention (test.dvps.uk/index.html) and following your questions:

1) " ... the Hamburger Menu, its in a 50% column and I want it right aligned ... "

The problems it's related to the div with class flex-container and the next div with class align (and note you have two definitions of class align : one floating right and the other floating left!)

2) ...pushes the content down of the container below but I want it to move the container too...

You can try with clear: right in the container after the menu.

Also you must note some properties in your file custom.css are misspelled (ie bot instead bottom ). Check it out this too.

I hope this help.

Saludos!

Answer 3

1) The alignment, as noted by others, is due to the flex container. Add:

justify-content: flex-end to right align.

2) The toggled menu pushing the content down is due to the DOM being changed (think of it as an element that goes from 0px width/height to 100px width/height). The easiest fix is to take the element out of the DOM flow. One way is using position . So, an example:

position: absolute; right: 0; z-index: 1 position: absolute; right: 0; z-index: 1 to ul.nav

Your hamburger should now be right aligned, and the hamburger content should not interfere/push down the other content.