반응형 메뉴바를 일정크기에 변하게 할수 있나요?
본문
안녕하세요?
그누보드로 이용해서 홈페이지를 만들고 있는데요.
빌더의 힘을 빌려서 그나나 좀 쉽게 하고 있습니다.
메뉴가 많아서 그러는데 반응형은 가로를 줄이면 메뉴가 모바일용으로 바뀌는데요.
모바일용은 가로가 768 이하여야지만 메뉴바가 버튼식으로 바뀝니다.
이거를 가로가 1026일때 메뉴바만 모바일용으로 바꿀수 없을까요???
현재 작업중인 홈페이지 입니다.
고수님들 도와주세요!!!!
답변 1
안녕하세요?
Bootstrap에서 제공하는 클래스 중
.navbar-collapse와 .visible-xs-block 클래스가 가로 768픽셀에서 동작하도록 맞춰져 있어서 그런것 같습니다.
크롬 개발자도구를 열고 브라우저 가로 넓이를 바꿔가며 해당 클래스의 CSS가 어떻게 동작하는지 보시면 이해 되실거에요.
아래는 위와 같은 방법으로 찾아본 Bootstrap CSS 코드 입니다.
@media (max-width: 767px) {
.visible-xs-block {
display: block!important;
}
}
@media (min-width: 768px) {
.navbar-collapse.collapse{
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
}
}
참고하셔서 조금만 응용하면 금방 하실 수 있을거에요.
답변감사합니다!!! 찾아서 해볼께요 ^^