Вход • Регистрация

Кривое меню

  •
  • 16 марта 2017 г. , редакция: 16 марта 2017 г.
  • Как вариант.
    В css меняете класс
    Код
    .wrap.wrap_nav {
    margin-top: 0;
    border-bottom: 1px solid #ecf0f1;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: #fff;
    z-index: 3;
    }

    На этот
    Код
    .wrap.wrap_nav {
    margin-top: 0;
    border-bottom: 1px solid #ecf0f1;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #fff;
    z-index: 3;
    }

    Но тогда данный блок не будет фиксированным при прокрутки экрана вниз. Этот недостаток можно убрать дополнительным мини скриптом фиксации блока.

    Успехов.
    •
    • 16 марта 2017 г.
    • Вопрос а в каком именно css файле менять эти строки?
      •
      • 16 марта 2017 г.
      • Цитата
        в каком именно css файле

        Менять в том файле, в котором есть эти строчки
        Цитата
        .wrap.wrap_nav {
        margin-top: 0;
        border-bottom: 1px solid #ecf0f1;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        background: #fff;
        z-index: 3;
        }


        Или в настройках сайта отключите кеширование и дайте ссылку на сайт, тогда смогу сказать в каком файле.
        • 16 марта 2017 г.
        • Уже нашел , спасибо огромной , хотел уточнить а что за скрипт "мини скриптом фиксации блока" ? Можно поподробнее?
        •
        • 16 марта 2017 г. , редакция: 16 марта 2017 г.
        • Я думаю речь идет об этом:

          Код
          $(window).scroll(function () {
          if ($(this).scrollTop() > 500 ) {
          $(".wrap.wrap_nav").addClass("fixed");
          }
          else {
          $(".wrap.wrap_nav").removeClass("fixed");
          }
          });


          Код
          .wrap.wrap_nav {
          position: absolute;
          }
          .wrap.wrap_nav.fixed {
          position: fixed;
          }
  •
  • 17 марта 2017 г. , редакция: 17 марта 2017 г.
  • Ещё пара простых вариантов. Меню завёрнуто в блок
    Код
    <div class="wrap wrap_nav"></div>

    Можно для него добавить следующие стили:
    Код
    .wrap.wrap_nav {
    overflow-x: auto;
    overflow-y: hidden;
    }

    Тогда будет появляться полоса прокрутки и меню можно будет двигать. Ввиду отсутствия адаптивности с учётом того, что оно плавающее - оптимальный вариант.



    Второй вариант - убрать у самого блока меню фиксированную ширину:
    Код
    [class*="__center"] {
    position: relative;
    margin: auto;
    padding: 0 10px;
    width: 1001px;
    }
    Убрать в этом стиле (или поэкспериментировать) ширину - width: 1001px;
    Получится тогда так:



    Никаких допилов JS и прочих танцев с бубном данная ситуация не требует. Достаточно правок CSS.
    Единственное, в зависимости от общего применения шаблона-селектора [class*="__center"] он может влиять не только на блок меню. В этом случае его целесообразнее не править, а сразу под ним добавить перекрывающий каскад CSS конкретно для блока меню:
    Код
    [class*="__center"] {
    position: relative;
    margin: auto;
    padding: 0 10px;
    width: 1001px;
    }

    body nav.wrap__center {
    width: auto;
    }

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум