상단 바 중단 점 - Foundation 5

Question

Foundation 4에서 Foundation 5로 업그레이드했으며 상단 바에 사용자 정의 중단 점을 으로 설정하려고합니다. 없이는 Sass를 사용합니다.

파운데이션 4에서 당신이 foundation.css 파일에 다음 CSS 코드를 변경 할 수 있었다 :

.top-bar-js-breakpoint { 
    width: 48em !important; 
    ... 
} 

@media only screen and (min-width: 48em) { 
    ... 
} 

그러나이 재단 5 불가능이어야 나는의 조각을 찾을 수 없습니다입니다 그것을 바꾸는 CSS 또는 JS 코드.

나는 또한 그냥 작동하지 않습니다 9999em하는 TOP BAR BREAKPOINT 세트로 새로운 사용자 정의 재단 설치를 다시 다운로드 노력했다. 이전의 모든 파일과 코드를 제거한 후에도.

이 간단한 문제는 나를 미치게한다, 그래서 누군가가 간단한 sollution 내 고통을 제발 넣어한다면 그것은 좋은 것입니다!

미리 감사드립니다.

Answer 1

코드에서 meta.foundation-mq-topbar CSS 선택기를 찾아 width 속성 값을 48em 또는 원하는 다른 크기로 변경하십시오.

또 다른 해결책 : 서로 재단 별도의 구성 요소 미디어 쿼리, 각 구성 요소에 대한 중단 점을 변경할 수 있습니다. 이 코드를보십시오 :

@media only screen and (min-width: 40.063em) { 
    .top-bar { 
    background: #333333; 
    *zoom: 1; 
    overflow: visible; } 
    .top-bar:before, .top-bar:after { 
     content: " "; 
     display: table; } 
    .top-bar:after { 
     clear: both; } 
    .top-bar .toggle-topbar { 
     display: none; } 
    .top-bar .title-area { 
     float: left; } 
    .top-bar .name h1 a { 
     width: auto; } 
    .top-bar input, 
    .top-bar .button { 
     font-size: 0.875rem; 
     position: relative; 
     top: 7px; } 
    .top-bar.expanded { 
     background: #333333; } 

    .contain-to-grid .top-bar { 
    max-width: 62.5em; 
    margin: 0 auto; 
    margin-bottom: 0; } 

    .top-bar-section { 
    -webkit-transition: none 0 0; 
    -moz-transition: none 0 0; 
    transition: none 0 0; 
    left: 0 !important; } 
    .top-bar-section ul { 
     width: auto; 
     height: auto !important; 
     display: inline; } 
     .top-bar-section ul li { 
     float: left; } 
     .top-bar-section ul li .js-generated { 
      display: none; } 
    .top-bar-section li.hover > a:not(.button) { 
     background: #272727; 
     color: white; } 
    .top-bar-section li a:not(.button) { 
     padding: 0 15px; 
     line-height: 45px; 
     background: #333333; } 
     .top-bar-section li a:not(.button):hover { 
     background: #272727; } 
    .top-bar-section .has-dropdown > a { 
     padding-right: 35px !important; } 
     .top-bar-section .has-dropdown > a:after { 
     content: ""; 
     display: block; 
     width: 0; 
     height: 0; 
     border: inset 5px; 
     border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent; 
     border-top-style: solid; 
     margin-top: -2.5px; 
     top: 22.5px; } 
    .top-bar-section .has-dropdown.moved { 
     position: relative; } 
     .top-bar-section .has-dropdown.moved > .dropdown { 
     display: none; } 
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown { 
     display: block; } 
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after { 
     border: none; 
     content: "\00bb"; 
     top: 1rem; 
     margin-top: -2px; 
     right: 5px; } 
    .top-bar-section .dropdown { 
     left: 0; 
     top: auto; 
     background: transparent; 
     min-width: 100%; } 
     .top-bar-section .dropdown li a { 
     color: white; 
     line-height: 1; 
     white-space: nowrap; 
     padding: 12px 15px; 
     background: #333333; } 
     .top-bar-section .dropdown li label { 
     white-space: nowrap; 
     background: #333333; } 
     .top-bar-section .dropdown li .dropdown { 
     left: 100%; 
     top: 0; } 
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] { 
     border-bottom: none; 
     border-top: none; 
     border-right: solid 1px #4d4d4d; 
     clear: none; 
     height: 45px; 
     width: 0; } 
    .top-bar-section .has-form { 
     background: #333333; 
     padding: 0 15px; 
     height: 45px; } 
    .top-bar-section ul.right li .dropdown { 
     left: auto; 
     right: 0; } 
     .top-bar-section ul.right li .dropdown li .dropdown { 
     right: 100%; } 

    .no-js .top-bar-section ul li:hover > a { 
    background: #272727; 
    color: white; } 
    .no-js .top-bar-section ul li:active > a { 
    background: #2ba6cb; 
    color: white; } 
    .no-js .top-bar-section .has-dropdown:hover > .dropdown { 
    display: block; } 
} 

위의 코드를 찾아 최상위 바 중단 점을 변경하기 위해이 미디어 쿼리를 변경해야합니다. 좋아

Answer 2

, 나는 내가 SCSS 컴파일 후 고정하는 CSS 변경을 생각합니다.

는

당신의 CSS에서 .top-bar 검색 및 아래 유사한 항목을 찾습니다, 변화 필요 "981px"당신의 CSS 변경 "981px"에서 meta.foundation-mq-topbar에 대한

@media only screen and (min-width: 981px) { 
.top-bar { 
    background: linear-gradient(to bottom, #7d7d7d 0%, #646464 100%); 
    *zoom: 1; 
    overflow: visible 
} 

검색 필요 :

meta.foundation-mq-topbar { 
    font-family: "/only screen and (min-width: 981px)/"; 
    width: 981px 
} 

Answer 3

기본적으로 Parhum에서 솔루션을 읽은 후 작동하게 만들었습니다.
meta.foundation-MQ-topbar를 검색합니다. 내 경우에는 40.063em 이에 해당하는 너비가 있어야합니다.이 중 하나는 변경해야합니다. 이제 해당 미디어 쿼리 (즉, @media only screen 및 (min-width : 40.063em))를 ​​찾습니다. 두 줄의 너비를 모두 바꿉니다. 지금은 잘 작동해야합니다.

meta.foundation-mq-topbar { 
font-family: "/only screen and (min-width:64.00em)/"; 
width: 64.00em !the width of this must change; } 

@media only screen and (min-width: 64.00em) { 
.top-bar { 
background: #333333;