nav 높이가 필요 이상으로 낮아질 때 가려지는 현상

nav 로직

menu를 클릭했을 때 클릭 이벤트가 발생하여 해당 nav에 show 클래스가 들어가게 되고, show 클래스에 미리 따로 스타일을 주어 nav를 화면에 비추어준다.

이번에 적용한 nav는 위에서 아래로 내려오는 구조이다. header__nav를 평소에는 top: -150%를 주었다가 show가 들어가면 top: 0%를 주는 스타일.

position은 fixed로 주었는데 이때 창의 높이가 낮아졌을 때 nav가 화면에 먹히게 되는 문제가 생겼다.

 

 

높이 정상

 

 

내비게이션이 잘림

 

 

---

 

 

HTML

<header class="header">
      <div class="header__container">
          <div class="header__info">
            <a href="/openconcert/index.php"
              ><img src="/openconcert/img/logo.png" alt="logo" class="logo"
            /></a>
          </div>
        <div class="header__nav">
          <ul>
            <li class="active"><a href="/openconcert/page/opc/opc.php">오픈콘서트</a></li>
            <li><a href="/openconcert/page/perform/perform.php">공연목록</a></li>
            <li><a href="/openconcert/page/notice/notice.php">공지사항</a></li>
            <li>
              <a href="/openconcert/page/qna/qna.php">Q&A</a>
            </li>
            <li><a href="/openconcert/page/goods/goods.php">굿즈스토어</a></li>
          </ul>
        </div>
</header>

/* NAV */
.header__nav {
  width: 100%;
  height: 100%;
  position: fixed;
  top: -150%;
  left: 0;
  background: url(/openconcert/img/menu.jpg) no-repeat center;
  background-size: cover;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 72px;
  transition: all 0.4s;
  visibility: hidden;
}

.header__nav.show {
  top: 0%;
  visibility: visible;
  z-index: 21;
}

 

이런 일이 일어나는 것을 방지하기 위해 overflow 되었을 시 스크롤이 생기도록 한다.

 

.header__nav.show {
  top: 0%;
  visibility: visible;
  z-index: 21;
  overflow-y: scroll;
}

/*overflow-y 추가*/