LaFrish LaFrish - 4 months ago 10
CSS Question

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>




Answer

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

Comments