Menu
So I'm just getting into JavaScript and HTML and what not, and I'm struggling a little. I'n not quite sure how to position the hamburger menu I made to the top right of the website for desktop and for mobile. Any help is much appreciated!
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
min-height: 100vh;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>Reminder, I am quite new and am trying to make a website for my coach to use in the future. I seem to not get the hang of css yet, and I don't believe typing right and left in position will work hahaha. So any help is much needed and apprciated!
283
asked Oct 29 '25 17:10
just add position: fixed; and top: 0; right: 0 to .menu-btn:
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if(!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #272727;
display: flex;
min-height: 100vh;
}
.menu-btn {
position: fixed;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255,101,47,.2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<script src="main.js"></script>
</body>
</html>You want to show the hamburger icon in a nav menu fixed at the top of the page, so there are a few things you need to change
1. Add the navmenu!
Put your menu icon into a nav element at the top of the page:
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
2. Make it fixed to the top of the page when you scroll using position:fixed and top:0:
nav.navbar {
position: fixed;
top: 0;
width: 100%;
height: 80px;
}
3. Position the div for your hamburger icon in the navbar. We use position:absolute to put it exactly where we want it in the nav bar - in this case top right
.menu-btn {
position: absolute;
top: 0;
right: 0;
/* rest of your CSS */
}
4. Prevent the navbar from overlapping the content Because the navbar is fixed, it is not part of the page flow so the other elements "ignore" it and it will overlap with them.
Therefore we need to move the content on the page down so it isn't hidden behind the navbar, We can use that using margin or padding :
body {
padding-top: 100px;
/* Rest of your CSS */
}
Handy References for Positioning: CSS Tricks and Mozilla Docs
Note: I have removed your display: flex; from the body because it messes up the layout for the content - if you keep it in, all the paragraphs are displayed in continuous lines instead of separate lines for example.
Working Snippet:
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* display: flex; */
/* remove this or it will mess up your standard text display */
background: #272727;
min-height: 100vh;
position: relative;
/* make space for the navbar - the fixed nav bar is not part of the "flow" so it will overlap the content */
padding-top: 100px;
}
p {
color: white;
}
nav.navbar {
background: #444;
position: fixed;
/* means it will always be stuck to the top of the page */
top: 0;
/* places it at the top */
width: 100%;
height: 80px;
}
.menu-btn {
/* Place the element in the exact position we want - top right corner 0,0 */
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- links -->
<link rel="stylesheet" href="style.css">
<!-- Top of the Page -->
<title>Uni High Aquatics</title>
</head>
<body>
<nav class="navbar">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</nav>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
