스틱 탐색, 상단은 표시되지 않음

Question

코드가있는 경우 : https://codepen.io/anon/pen/ObzgYo 어떻게하면 탐색 모음이 상단에서 오른쪽으로 꺾이지 않고 상단에서 20px 아래에 있도록 할 수 있습니까?

.main-nav-scrolled { 
    position: fixed; 
    width: 100%; 
    top: 20; <== 
} 

을하지만 그것이 내가 마진-X 또는 패딩-x가 더 신뢰할 수 발견 어떤 이유로

Answer 1

의 하단에 부착한다 :

나는이 일을 시도했다.

.main-nav-scrolled { 
    margin-top: 20px; 
} 

예를 들어, 여백은 공백을 제공하지만 패딩은 배경색을 확장합니다.

Answer 2

편집중인 코드는 헤더 및 메인 탐색 스크롤 된 클래스 용입니다. 기본 값을 기본 탐색 스크롤 된 클래스에만 추가하면 예상대로 작동합니다.

header, 
.main-nav-scrolled { 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 
.main-nav-scrolled { 
    top: 20px; 
}