부트스트랩공부중에...네브바 궁금한점이 있어서요...
본문
부트스트랩 공부중에 화면 해상도에 따른 네브바에 관한 궁금한 점이 있어서요.
화면해상도에 따라서 메뉴가 안나오고 햄버거 버튼이 나오게 하려면
미디어 쿼리를 어떻게 해야 하는지 궁금해서요...
http://gwm.or.kr/ 저희 선교회 홈페이지인데요...
익스플로러를 늘렸다 줄였다 하면 메뉴가 좀 어색하게 나오는 화면크기가 있는데요
css에서 미디어 쿼리를 어떻게 해줘야 하는지...궁금해서요...
아래 그림에서요...
밑에 그림에 있는 메뉴들을 위에 그림처럼 햄버거 버튼으로 나오게 하고 싶은데요...
부탁드립니다...
답변 2
레이아웃 잡아높으신 "로고 - 메뉴 - 회원가입/로그인" 부분이 차지하는 최소너비가 992px 이시네요.
그 이하에서는 줄바꿈이 되어 보이죠.
일단 버튼부분은 .navbar-toggle 부분인데 이것이 아래와 같이 되어 있죠.
@media (min-width: 768px) {
.navbar-toggle {display:none}
}
즉 필요하신것은 992px 이하인데 768px부터 안보이니 이걸 992px로 변경하시면 버튼이 등장하겠죠.
또한 메뉴바가 접히는 영역인 .navbar-collapse 부분도 아래처럼 768px 기준이니 992px로 변경하시고요.
@media (min-width: 768px)
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
그 밖의 변경해야 되는 부분도 있을시 있으면 직접 찾아보시면 될겁니다.
물론, 특정한 곳을 위해 변경하신내용이지만 다른페이지에서 같은 부트스트랩 코드를 가져다쓰면 그것도 변경하신 내용이 적용되니 유념하시고요.
메뉴영역은@media (min-width: 768px) 이고
하단 영역은 @media (min-width: 992px) 입니다.
768~1000구간에서 메뉴는 min-width: 768px 때문에 깨져 보입니다.
css 파일의 min-width: 768px있는 메뉴관련된 클래스들을 min-width: 992px 으로 이동 하시면 됩니다.
님아 답변 감사한데요...죄송한데 무슨말인지 잘 이해가 안됩니다.
조금더 설명을 해주시면 안될런지요...