Изменение контрольной точки Topbar с пользовательским CSS?

Question

Я пытаюсь перейти от Bootstrap к Foundation, но у меня возникла проблема с попыткой определить, как точно изменить точку останова для верхней панели в Foundation. Я использую CDN-версию мини-CSS для Foundation, поэтому у меня нет доступа к настройкам файла SASS, чтобы изменить это. Есть ли быстрое обходное ограничение CSS? Пока мои поиски здесь и Google не нашли рабочего решения.

Answer 1

Импорт другой файл CSS ниже уменьшенная Foundation CSS, которые будут нацелены на topbar

<link rel="stylesheet" href="foundation-min.css"> 
 
<link rel="stylesheet" href="override.css">

Так, например, если .topbar имеет margin: 1px; заменить его на override.css, установив другой margin: 2px; атрибут есть.

Это сообщение поможет https://stackoverflow.com/a/31511646/6294600

Вы проверили это один https://zurb.com/university/lessons/change-foundation-s-default-breakpoints

EDIT: намек здесь ...

взгляд для .show-for-medium класса ... Я надеюсь, что вы знаете, что делать после этого ... не сдавайтесь ...

@media screen and (max-width: 39.9375em) { 
 
    .hide-for-small-only { 
 
    display: none !important; } } 
 

 
@media screen and (max-width: 0em), screen and (min-width: 40em) { 
 
    .show-for-small-only { 
 
    display: none !important; } } 
 

 
@media screen and (min-width: 40em) { 
 
    .hide-for-medium { 
 
    display: none !important; } } 
 

 
@media screen and (max-width: 39.9375em) { 
 
    .show-for-medium { 
 
    display: none !important; } } 
 

 
@media screen and (min-width: 40em) and (max-width: 63.9375em) { 
 
    .hide-for-medium-only { 
 
    display: none !important; } } 
 

 
@media screen and (max-width: 39.9375em), screen and (min-width: 64em) { 
 
    .show-for-medium-only { 
 
    display: none !important; } } 
 

 
@media screen and (min-width: 64em) { 
 
    .hide-for-large { 
 
    display: none !important; } } 
 

 
@media screen and (max-width: 63.9375em) { 
 
    .show-for-large { 
 
    display: none !important; } } 
 

 
@media screen and (min-width: 64em) and (max-width: 74.9375em) { 
 
    .hide-for-large-only { 
 
    display: none !important; } } 
 

 
@media screen and (max-width: 63.9375em), screen and (min-width: 75em) { 
 
    .show-for-large-only { 
 
    display: none !important; } }

Эти части могут быть найдены в https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css

изменить значения, я надеюсь, что это отвечает на вопрос. Счастливый Coding ...

ПОСЛЕДНИЕ НЕМНОГО INFO:

изменить мин размера ширина

@media screen and (min-width: 64em) { 
    .top-bar{ 
    display:none; 
    } 
}