Foundation 6 Sticky Topbar не работает должным образом при небольшом изменении размера браузера

У меня есть липкая верхняя панель на моем сайте. Он отлично работает на больших и средних, но когда он становится маленьким, он развивает высоту 54 пикселя. Я установил класс sticky-container на высоту: 0; и это работает, если я обновляю браузер. Когда я ухожу и возвращаюсь обратно, снова появляется зазор в 54 пикселя. Любые идеи? Спасибо-Адольфо

HTML:

    <!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
    <a class="logo-small show-for-small-only" href="#"><img src="/assets/img/fingerLogoXS.gif" /></a>
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<div data-sticky-container>
    <div class="small-12 sticky" data-sticky data-options="marginTop: 0">
        <nav class="top-bar" id="nav-menu">
            <div class="logo-wrapper hide-for-small-only">
                <div class="logo">
                    <img src="/assets/img/fingerLogoSM.2.gif">
                </div>
            </div>
            <!-- Left Nav Section -->
            <div class="top-bar-left">
                <ul class="vertical medium-horizontal menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                </ul>
            </div>
            <!-- Right Nav Section -->
            <div class="top-bar-right">
                <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
                    <li class="has-submenu">
                        <a href="#">Technologies Used...</a>
                        <ul class="submenu menu vertical medium-verticle" data-submenu>
                            <li><a href="foundation.html">Foundation</a></li>
                            <li><a href="html5.html">HTML5</a></li>
                            <li><a href="css3.html">CSS3</a></li>
                            <li><a href="javascript.html">JavaScript</a></li>
                            <li><a href="wordpress.html">WordPress</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

CSS:

    /* Small Navigation */
.logo-small {
  float: right;
  padding: 4px; }

.title-bar {
  padding: 0 .5rem;
  background-color: #3D3242; }

.menu-icon,
.title-bar-title {
  position: relative;
  top: 10px;
  padding: 4px; }

/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
  .logo-wrapper {
    position: relative; }
  .logo-wrapper .logo {
    width: 92px;
    height: 92px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: -6px;
    margin-left: -46px; }
  .top-bar-right {
    width: 50%;
    padding-left: 60px; }
  .top-bar-right ul {
    float: left; }
  .top-bar-left {
    width: 50%;
    padding-right: 60px; }
  .top-bar-left ul {
    float: right; } }

Адрес моего веб-сайта: http://adolfobarreto.atwebpages.com.


html css zurb-foundation zurb-foundation-6
person Adolfo J Barreto    schedule 12.01.2016    source источник
comment
вам не нужно, чтобы он отображался в мобильном представлении, почему бы просто не скрыть его? вы используете другое меню для мобильных устройств   -  person BinaryGhost    schedule 12.01.2016
comment
это хорошая идея ... вы имеете в виду медиа-запрос? Дело в том, что я хотел работать в рамках фонда. Зачем взламывать его, когда я уверен, что есть правильный способ сделать это. Я просто нуб Фонда... лол. Спасибо за предложение. Я ценю это!   -  person Adolfo J Barreto    schedule 12.01.2016
comment
Рад помочь :), я также разместил подробный ответ с 2 методами   -  person BinaryGhost    schedule 12.01.2016
comment
Неважно... Вы правы, BinaryGhost. Я нашел его в разделе «Скрыть по размеру экрана». Я собираюсь проверить это и ответить на свой вопрос здесь. Еще раз спасибо!   -  person Adolfo J Barreto    schedule 12.01.2016

Ответы (1)


arrow_upward
2
arrow_downward

Как я уже сказал в комментарии, вы можете просто скрыть div.

Вы можете использовать базовые классы видимости

просто добавьте класс

hide-for-small-only

на липком div. дополнительную информацию можно найти здесь:http://foundation.zurb.com/sites/docs/v/5.5.3/components/visibility.html

Или вы можете использовать медиазапросы

@media screen 
and (max-width : 640px) {
    .sticky-container{display:none;}
}

Это скроет div, когда ширина экрана меньше 640 пикселей;

person BinaryGhost    schedule 12.01.2016
comment
Спасибо, я как раз собирался это сделать. - person Adolfo J Barreto; 12.01.2016
comment
BinaryGhost, я пробовал скрыть только для маленьких, и это не сработало. Все еще делаю то же самое... проверьте это adolfobarreto.atwebpages.com - person Adolfo J Barreto; 12.01.2016
comment
Вы должны поместить это здесь - ‹div data-sticky-container class=hide-for-small-only› (строка 8 в вашем примере html) ||| вы поместили его во внутренний div, поэтому внутренний div был скрыт, а родитель - нет. - person BinaryGhost; 12.01.2016
comment
Да! Вот оно. Теперь он работает правильно. Спасибо BinaryGhost! - person Adolfo J Barreto; 12.01.2016
comment
Хорошо, я не проверял, работает ли меню гамбургеров. Я обнаружил, что это не работает. Оказывается, правильный код — ‹div data-sticky-container data-hide-for=small›. ржунимагу - person Adolfo J Barreto; 13.01.2016
comment
Похоже, у вас есть 2 варианта исправления меню. Вы можете добавить «навигацию» в строку заголовка, просто измените идентификатор. Или вы можете добавить «заголовок» в «стик-контейнер» и показывать его только на мобильных устройствах. Но вам нужно будет отобразить «липкий контейнер». - person BinaryGhost; 13.01.2016
comment
Спасибо BinaryGhost... Я работаю над этим. Я ценю вашу помощь. - person Adolfo J Barreto; 13.01.2016