При уменьшении размера экрана пропадает меню

Аватар пользователя Skpn

При уменьшении размера экрана пропадают подпункты меню. Понятно, что в идеале в bootstrap на малых экранах меню становится выпадающим, так было и у меня, но потом всё слетело. Сравнивал css, вроде никаких явных косяков нет. Подскажите, пожалуйста, в чём проблема?

Ссылка на сайт http://avers.xyz/

ВложениеРазмер
Иконка изображения snimok_57.jpg94.69 КБ
Иконка изображения screenshot_20170728-154000.png316.66 КБ
Тип материала:
Версия Drupal:
0 Thanks

Лучший ответ

Аватар пользователя Skpn
Skpn 3 месяца назад
ArmRus написал:
Проверь тот ли файл подключается. Может есть еще 1 page.tpl.php в другой папке темы и он тянется. Может есть копия темы, или одноименный модуль С темой, который мешает понять твой page.tpl.php... может у тебя где то page--front.tpl.php. файл лежит с другим кодом? Вариантов много. Но суть ошибки одна- в исходном коде у тебя нет кнопки свернутого меню.

Отдуши, спасибо большое!
Дело было реально в page.tpl. Сравнил действующий с дефолтным из темы bootstrap, там совсем другой код. Местами его подставил в действующий и всё заработало. Теперь код такой:

<?php<header id="navbar" role="banner" class="<?php print $navbar_classes?>">
  <div class="<?php print $container_class?>">
    <div class="navbar-header">
      <?php if ($logo): ?>
        <a class="logo navbar-btn pull-left" href="<?php print $front_page?>" title="<?php print t('Home'); ?>">
          <img src="<?php print $logo?>" alt="<?php print t('Home'); ?>" />
        </a>
      <?php endif; ?>

      <?php if (!empty($site_name)): ?>
        <a class="name navbar-brand" href="<?php print $front_page?>" title="<?php print t('Home'); ?>"><?php print $site_name?></a>
      <?php endif; ?>

      <?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="sr-only"><?php print t('Toggle navigation'); ?></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <?php endif; ?>
    </div>

    <?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
      <div class="navbar-collapse collapse" id="navbar-collapse">
        <nav role="navigation">
          <?php if (!empty($primary_nav)): ?>
            <?php print render($primary_nav); ?>
          <?php endif; ?>
          <?php if (!empty($secondary_nav)): ?>
            <?php print render($secondary_nav); ?>
          <?php endif; ?>
          <?php if (!empty($page['navigation'])): ?>
            <?php print render($page['navigation']); ?>
          <?php endif; ?>
        </nav>
      </div>
    <?php endif; ?>
  </div>
</header>
?>

Комментарии

Аватар пользователя ArmRus
ArmRus 3 месяца назад

По всей видимости вы этот кусок кода удалили или переделали в темплейте темы.

<?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="sr-only"><?php print t('Toggle navigation'); ?></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
<?php endif; ?>
Аватар пользователя Skpn
Skpn 3 месяца назад

Спасибо! При использовании этого кода появляется кнопка на выпадающее меню на малом разрешении, но меню не выпадает при клике на неё. А вот для обычного экрана меню исчезает, как было раньше на малом.
Используемый код сейчас:

<?php<header id="navbar" role="banner" class="<?php print $navbar_classes?>">
    <?php if (!empty($logo) || !empty($site_name)): ?>
    <div class="navbar-header">
      <?php if ($logo): ?>
      <a class="logo pull-left" href="<?php print $front_page?>" title="<?php print t('Home'); ?>">
        <img src="<?php print $logo?>" alt="<?php print t('Home'); ?>" />
      </a>
      <?php endif; ?>

      <?php if (!empty($site_name)): ?>
      <a class="name navbar-brand" href="<?php print $front_page?>" title="<?php print t('Home'); ?>"><?php print $site_name?></a>
      <?php endif; ?>

      
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <?php endif; ?>

    <?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="sr-only"><?php print t('Toggle navigation'); ?></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
<?php endif; ?>
</header>
?>

Теперь понимаю, что надо с page.tpl работать, но в чём именно проблемы - пока вопрос

Аватар пользователя Skpn
Skpn 3 месяца назад

Вроде в page.tpl всё это есть

<?php<header id="navbar" role="banner" class="<?php print $navbar_classes?>">
    <?php if (!empty($logo) || !empty($site_name)): ?>
    <div class="navbar-header">
      <?php if ($logo): ?>
      <a class="logo pull-left" href="<?php print $front_page?>" title="<?php print t('Home'); ?>">
        <img src="<?php print $logo?>" alt="<?php print t('Home'); ?>" />
      </a>
      <?php endif; ?>

      <?php if (!empty($site_name)): ?>
      <a class="name navbar-brand" href="<?php print $front_page?>" title="<?php print t('Home'); ?>"><?php print $site_name?></a>
      <?php endif; ?>

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only"><?php print t('Toggle navigation'); ?></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <?php endif; ?>

    <?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
      <div class="navbar-collapse collapse">
        <nav role="navigation">
          <?php if (!empty($primary_nav)): ?>
            <?php print render($primary_nav); ?>
          <?php endif; ?>
          <?php if (!empty($secondary_nav)): ?>
            <?php print render($secondary_nav); ?>
          <?php endif; ?>
          <?php if (!empty($page['navigation'])): ?>
            <?php print render($page['navigation']); ?>
          <?php endif; ?>
        </nav>
      </div>
    <?php endif; ?>
</header>
?>
Аватар пользователя Mihail.space
Mihail.space 3 месяца назад

У вас в мобильном разрешении экрана

.collapse{
display:none
}

В поток браузеру навигация выводится, но не отображается

collapse

Проверьте стили в @media screen в css

Аватар пользователя Skpn
Skpn 3 месяца назад

Столько свойств для navbar, что не понимаю, где смотреть

@media (min-width: 768px) {
  .navbar-right .dropdown-menu {
    left: auto;
    right: 0;
  }
  .navbar-right .dropdown-menu-left {
    left: 0;
    right: auto;
  }
}
@media (min-width: 768px) {
  .navbar {
    border-radius: 4px;
  }
}
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}
@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-device-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 200px;
  }
}
@media (min-width: 768px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .navbar-static-top {
    border-radius: 0;
  }
}
@media (min-width: 768px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}
@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}
@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .navbar-form .form-control-static {
    display: inline-block;
  }
  .navbar-form .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .navbar-form .input-group .input-group-addon,
  .navbar-form .input-group .input-group-btn,
  .navbar-form .input-group .form-control {
    width: auto;
  }
  .navbar-form .input-group > .form-control {
    width: 100%;
  }
  .navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio label,
  .navbar-form .checkbox label {
    padding-left: 0;
  }
  .navbar-form .radio input[type="radio"],
  .navbar-form .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .navbar-form .has-feedback .form-control-feedback {
    top: 0;
  }
}
@media (max-width: 767px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .navbar-form {
    width: auto;
    border: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
@media (min-width: 768px) {
  .navbar-text {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
  }
}
@media (min-width: 768px) {
  .navbar-left {
    float: left !important;
  }
  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
  .navbar-right ~ .navbar-right {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #7d4a1f;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #7d4a1f;
    background-color: #ee8b36;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
  }
}
Аватар пользователя Mihail.space
Mihail.space 3 месяца назад

посмотрите класс
.collapse

Аватар пользователя ArmRus
ArmRus 3 месяца назад
Mihail.space написал:
У вас в мобильном разрешении экрана

.collapse{

display:none

}

В поток браузеру навигация выводится, но не отображается
collapse

Так и должно быть!

Skpn написал:
Вроде в page.tpl всё это есть

Посмотрите, у вас

Аватар пользователя ArmRus
ArmRus 3 месяца назад
Mihail.space написал:
посмотрите класс

.collapse

Если снять этот display: none, сломается адаптивность этого-же меню.. и многое другое может некорректно отображаться на сайте. Этот совет не правильный.

Аватар пользователя Mihail.space
Mihail.space 3 месяца назад

Я бустрап не использую, потому, что мобильные меню это примитивные вещи. их проще самому делать как нужно по дизайну. Поэтому вполне могу согласиться,что совет неверный.

Это сообщение находится в тёмной материи. Вы можете изменить настройки просмотра тёмной материи в личном кабинете.
Аватар пользователя ArmRus
ArmRus 3 месяца назад

что-то не сходится с вашим примером page-tpl.php
В исходном коде вашей страницы не выводится кнопка "бургера"

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
Mihail.space написал:
Я бустрап не использую, потому, что мобильные меню это примитивные вещи. их проще самому делать как нужно по дизайну. Поэтому вполне могу согласиться,что совет неверный.

Я тоже не использую, при беглом просмотре кода, ясно становится, что проблема в кнопке, которая должна появится и раскрывать меню, а ее нет...

Аватар пользователя Skpn
Skpn 3 месяца назад

Код, который на данный момент содержится в page.tpl вот:

<?php
<header id="navbar" role="banner" class="<?php print $navbar_classes; ?>">
    <?
php if (!empty($logo) || !empty($site_name)): ?>
    <div class="navbar-header">
      <?php if ($logo): ?>
      <a class="logo pull-left" href="<?php print $front_page?>" title="<?php print t('Home'); ?>">
        <img src="<?php print $logo?>" alt="<?php print t('Home'); ?>" />
      </a>
      <?php endif; ?>

      <?php if (!empty($site_name)): ?>
      <a class="name navbar-brand" href="<?php print $front_page?>" title="<?php print t('Home'); ?>"><?php print $site_name?></a>
      <?php endif; ?>

      
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <?php endif; ?>

    <?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
      <div class="navbar-collapse collapse">
        <nav role="navigation">
          <?php if (!empty($primary_nav)): ?>
            <?php print render($primary_nav); ?>
          <?php endif; ?>
          <?php if (!empty($secondary_nav)): ?>
            <?php print render($secondary_nav); ?>
          <?php endif; ?>
          <?php if (!empty($page['navigation'])): ?>
            <?php print render($page['navigation']); ?>
          <?php endif; ?>
        </nav>
      </div>
    <?php endif; ?>
</header>

?>

С ним кнопки также нет.

Сложившаяся ситуация вообще не понятна. Сайт делал на основе готовой сборки, в ней на малом экране меню работает исправно: есть кнопка, после которой выпадает меню. У меня сначала также всё было, но потом слетело, на каком моменте - не знаю, потому что не перепроверял адаптивность сайта при каждом изменении. Решил сравнить мои нынешние файлы page.tpl и style.css с дефолтными из сборки, вроде для navbar все параметры одинаковые, поэтому попробовал заменить поочерёдно используемые сейчас page.tpl и style.css файлами из сборки по умолчанию, проверял всё как надо: с запуском update.php и чисткой всех кэшэй, в итоге всё равно меню не появлялось. Хотя устанавливая сборку с теми файлами на отдельный домен там работает всё исправно.

Возможно ли, что проблема вообще не в этих кодах, а в каких-то других файлах?

Аватар пользователя ArmRus
ArmRus 3 месяца назад

Проверь тот ли файл подключается. Может есть еще 1 page.tpl.php в другой папке темы и он тянется. Может есть копия темы, или одноименный модуль С темой, который мешает понять твой page.tpl.php... может у тебя где то page--front.tpl.php. файл лежит с другим кодом? Вариантов много. Но суть ошибки одна- в исходном коде у тебя нет кнопки свернутого меню.

Аватар пользователя Skpn
Skpn 3 месяца назад
ArmRus написал:
Проверь тот ли файл подключается. Может есть еще 1 page.tpl.php в другой папке темы и он тянется. Может есть копия темы, или одноименный модуль С темой, который мешает понять твой page.tpl.php... может у тебя где то page--front.tpl.php. файл лежит с другим кодом? Вариантов много. Но суть ошибки одна- в исходном коде у тебя нет кнопки свернутого меню.

Отдуши, спасибо большое!
Дело было реально в page.tpl. Сравнил действующий с дефолтным из темы bootstrap, там совсем другой код. Местами его подставил в действующий и всё заработало. Теперь код такой:

<?php<header id="navbar" role="banner" class="<?php print $navbar_classes?>">
  <div class="<?php print $container_class?>">
    <div class="navbar-header">
      <?php if ($logo): ?>
        <a class="logo navbar-btn pull-left" href="<?php print $front_page?>" title="<?php print t('Home'); ?>">
          <img src="<?php print $logo?>" alt="<?php print t('Home'); ?>" />
        </a>
      <?php endif; ?>

      <?php if (!empty($site_name)): ?>
        <a class="name navbar-brand" href="<?php print $front_page?>" title="<?php print t('Home'); ?>"><?php print $site_name?></a>
      <?php endif; ?>

      <?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="sr-only"><?php print t('Toggle navigation'); ?></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      <?php endif; ?>
    </div>

    <?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
      <div class="navbar-collapse collapse" id="navbar-collapse">
        <nav role="navigation">
          <?php if (!empty($primary_nav)): ?>
            <?php print render($primary_nav); ?>
          <?php endif; ?>
          <?php if (!empty($secondary_nav)): ?>
            <?php print render($secondary_nav); ?>
          <?php endif; ?>
          <?php if (!empty($page['navigation'])): ?>
            <?php print render($page['navigation']); ?>
          <?php endif; ?>
        </nav>
      </div>
    <?php endif; ?>
  </div>
</header>
?>