CSS 내비게이션바 상단 고정

1 개요

CSS 내비게이션바 상단 고정

<style>
html {
  height: 150%;
  background: linear-gradient(red, yellow, green);
}
body { margin: 0; }
.navbar {
  background: hotpink;
  margin: 0; padding: 0;
  list-style: none;
  position: fixed;
  width: 100%;
}
.navbar>li {
  display: inline-block;
}
.navbar>li>a {
  display: block;
  text-decoration: none;
  padding: 10px 20px;
  color: white;
}
.navbar>li>a:hover {
  background: deeppink;
}
</style>

<ul class="navbar">
  <li><a href="#">홈</a></li>
  <li><a href="#">1번 메뉴</a></li>
  <li><a href="#">2번 메뉴</a></li> 
</ul>

2 같이 보기

• jQuery 내비게이션바 자동숨김
• CSS 내비게이션바
• CSS position 속성
• 상단 고정 내비게이션바 예시