javascript - How can I move my hamburger menu to the top right?

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>

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!

Share Improve this question asked Aug 20, 2020 at 5:17 Oliver Pomaranski 351 silver badge7 bronze badges

It really depends on what you need - for example, will you have a menubar that this will be part of, and if so what else is in it (e.g. the website name or logo)? Do you want it static so it always appears fixed at the top? – FluffyKitten Commented Aug 20, 2020 at 5:24
Fluffy I plan on having it stay at the top of the page no matter how far someone might scroll down, and would like it to be incorporated with a nav, but im not sure exactly how to do that. It was a struggle to e up with what I did hahaha. – Oliver Pomaranski Commented Aug 20, 2020 at 5:30
OK, well you have a few problems with your HTML in general, and if you want the menu icon in a navbar, that will change the CSS you need. I think you might be trying to run before you walk :) Maybe try a few tutorials on basic page design first before jumping into flex and vh - e.g. flex won't really work on the html body. Give me a minute and I'll get you an answer with some info... – FluffyKitten Commented Aug 20, 2020 at 5:36
Ive watched a few, and Ive made a few pens on codepen. Im trying to take everything I've learned and put it together. Though I do think, I am trying to run before walking. – Oliver Pomaranski Commented Aug 20, 2020 at 5:41
It can be difficult to find a good tutorial, I find videos are good to get the general idea, but follow up with written ones for more detail. This one might be a good refresher and kicking-off point How to create a website using HTML and CSS in 7 steps see also the CSS tutorials listed on the right. Get your dummy content together first, then start worrying about how it looks - boring, but necessary (especially when you're new to it :) ). Check my answer for your fixed navbar also :) – FluffyKitten Commented Aug 20, 2020 at 6:07

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

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>

You can do it many way

generally html align from left. if you need to change alignment there is many way..

you can simply do it by adding margin-left : auto; to .menu-btn class

 margin-left : auto;

There is other way do it ..

Firstly you need to remove position: relative; because one html element can't hold two position property then add code below to .menu-btn class

.menu-btn{
  position: fixed;
  top: 0;
  right: 0;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I move my hamburger menu to the top right? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)