CODEWITHSUNDEEP
javascriptjqueryhtmlcss
LaFrish
LaFrish

Reputation: 33

Nav icon is not fixed throughout the page

I have a hamburger nav that does not stay fixed on the page. I know many said that if you set the position:fixed should work. But I am still having issues. Here are some snippets. And you can also find the the code here - Codepen.

$('.menu-burger, .menu-items').on('click', function() {
  $('.menu-bg, .menu-items, .menu-burger').toggleClass('fs');
  $('.menu-burger').text() == "☰" ? $('.menu-burger').text('✕') : $('.menu-burger').text('☰');
});
.menu,
.menu-bg,
.menu-burger {
  position: fixed;
  width: 50px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  border-radius: 100%;
  right: 25px;
  top: 25px;
  border-width: 0 0 1px;
}
.menu-bg {
  position: fixed;
  background: #f91791;
  pointer-events: none;
  transition: .3s;
  right: 50px;
  top: 50px;
  transform: translate3d(50%, -50%, 0);
  transform-origin: center center;
}
.menu-bg.fs {
  transform: translate3d(50%, -50%, 0);
  width: 2000vw;
  height: 2000vw;
}
.menu-burger {
  position: fixed;
  color: #fff;
  padding-top: 11px;
  -webkit-user-select: none;
  cursor: pointer;
  transition: .4s;
  transform-origin: center;
}
.menu-burger.fs {
  transform: rotate(-180deg) translateY(10px);
}
.menu-items {
  font-family: 'Abril Fatface', serif;
  font-size: 125px;
  line-height: 120px;
  position: absolute;
  color: #fff;
  width: 100%;
  text-align: left;
  opacity: 0;
  transition: .4s;
  margin-top: 25px;
  transform: translateY(-200%);
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
}
.menu-items div {
  color: #fff;
  transition: 1s;
  opacity: 0;
  margin-top: 0px;
}
.menu-items div a {
  color: #fff;
  text-decoration: none;
}
.menu-items.fs {
  transform: translateY(0);
  pointer-events: auto;
  opacity: 1;
}
.menu-items.fs div {
  color: #fff;
  opacity: 1;
}
.menu-items.fs div a {
  color: #fff;
  text-decoration: none;
}
.menu-items.fs div a:hover {
  color: #000;
  text-decoration: none;
  transition: .4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="close">
  <nav class="nav">
    <div class="container">
      <div class="menu-bg"></div>
      <div class="menu-burger">☰</div>
      <div class="menu-items">
        <div><a href="#welcome">Home</a></div>
        <div><a href="#about">About Me</a></div>
        <div><a href="#portfolio">Skills</a></div>
        <div><a href="#resume">Portfolio</a></div>
        <div><a href="#contactMe">Contact Me</a></div>
      </div>
    </div>
  </nav>
</header>

Upvotes: 0

Views: 27

Answers (1)

NooBskie
NooBskie

Reputation: 3841

You need to move 

<header class="close">
  <nav class="nav">
    <div class="container">
      <div class="menu-bg"></div>
      <div class="menu-burger">☰</div>
      <div class="menu-items">
        <div><a href="#welcome">Home</a></div>
        <div><a href="#about">About Me</a></div>
        <div><a href="#portfolio">Skills</a></div>
        <div><a href="#resume">Portfolio</a></div>
        <div><a href="#contactMe">Contact Me</a></div>
      </div>
    </div>
  </nav>
</header>

to the top of your file outside of your section then add the following css

.menu, .menu-bg, .menu-burger{
 z-index:100
}

Here is a updated CodePen

Upvotes: 1

Related Questions