0

Below is part of html and CSS of the menu bars.

I want to put the menu bars in the right side. I know the actual menu bars are the blank contents with the background color. I have no idea about putting those contents to the right.

function myFunction(x) {
  x.classList.toggle("change");
}
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 40px;
  height: 5px;
  background-color: gainsboro;
  margin: 6px;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Seong Ho Park
  • 1
  • Welcome to Stack Overflow! Please visit [help], take [tour] to see what and [ask]. ***>>>[Do some research](https://www.google.com/search?q=css+right+align+div+site%3Astackoverflow.com)<<<***, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) – mplungjan Mar 28 '21 at 15:28
  • does class `.container` have a parent? – s.kuznetsov Mar 28 '21 at 15:31

0 Answers0