Зафиксировать верхнее меню

Где редактируются стили верхнего меню? Хочу зафиксировать его, чтобы при скроле оставался в видимой части экрана и перекрывал все остальные элементы. Где вставить 

position: fixed;


3 ответа

  • 2
    Алексей Webasyst 14 января 2020 09:57 #

    где именно?

    На витрине, в бекенде, на мобильном устройстве?

    • +1
      Владимир Захаров Владимир Захаров 14 января 2020 10:03 #

      На витрине и вообще на всех разделах сайта. И чтобы меню перекрывало все остальные элементы, а не пряталось за них. Настройками это вроде не делается, или я не нашел. Как это сделать в шаблонах? Заранее спасибо.

  • 1
    Владимир Захаров 14 января 2020 14:40 #

    Неужели никто не знает? Ведь в настройках такого нет. Неужели никто такого не делал?

    • +2

      Как мне проехать к супермаркету? Вот так звучит ваш вопрос, и ответа на него нет (вы не знаете про какой город, страну идет речь). Вы когда задаете такого рода вопросы прикладывайте информацию о вашей теме дизайна как минимум

  • 1
    Владимир Захаров 14 января 2020 15:53 #

    Тема дизайна Unishop. Я думал, меню редактируется одинаково в любой теме. Минимум уже указал, а как указать максимум? Как спросить так, чтобы в вопросе была половина ответа? )) Хотя, знал бы я половину ответа, может быть вторую половину нашел бы сам. А может и нет. В любом случае, прошу прощения, что отнимаю время вопросами с неполной информацией о проблеме. Разработчикам темы тоже задал этот вопрос, пока не отвечают, может вообще прекращена поддержка темы? Тогда жаль, тема хорошая и удобная.

    • +2
      replicant replicant 14 января 2020 17:52 #

      Каждая тема дизайна имеет свои уникальные особенности. Есть темы, где вообще нет верхнего меню или его нельзя просто так взять и заставить замереть на месте, ибо это разрушит верстку других зависимых блоков. Даже в вашем случае установки position:fixed может быть совсем недостаточно для решения. Если тема адаптивная, то тут ещё и думать надо, изучать на месте как переверстать блоки без косяков и не сломать начальную логику. Решение для одного разрешения экрана - так себе решение.

      Чтобы в вопросе была половина ответа укажите сайт, для которого нужны доработки, т.к. всегда проще отладчиком браузера по живому сайту пройти, чем расчехлять тему Unishop и смотреть в ней. Может быть тогда кто-нибудь откликнется. Больше половины ответа вы и сами найдете в инструментах разработчика (обычно Ctrl+Shift+I) в вашем браузере, если начнете изучать как это работает.

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

      • +1
        Владимир Захаров Владимир Захаров 15 января 2020 10:33 #

        Да, сайт, конечно, нужно было указать сразу, мог бы и сам сообразить. http://wasist.rsfix.ru/. Ctrl+Shift+I смотрел и пробовал править, получается хреново - либо съезжают другие элементы, либо фиксируется не вся панель меню, а только пункты на прозрачном фоне. Да и, все правильно, нужно сделать для любого экрана.

        • +3

          У вас есть кастомный файл стилей

          /wa-data/public/site/themes/unishop/unishop.custom.css

          отредактируйте его, примерный код следующий

          .header_top{
              position: fixed;
              width: 100%;
              z-index: 1000;
              box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.15); //опционально добавили тень, для выделения
              top: 0;
              left: 0;
          }
          
          .header{
              margin-top: 34px; //отступ шапки = высоте верхнего меню
          }

          • +1
            Владимир Захаров Владимир Захаров 15 января 2020 11:46 #

            Обалдеть! Как все просто! И главное, все отлично работает. А сам этого не смог. Пойду просить у руководства направление в вечернюю школу. И вообще, я редактировал не этот файл, а unishop.css. Большое спасибо!

            • +2

              удалите, иначе top: 0; не срабатывает

              //опционально добавили тень, для выделения

              • +1
                Владимир Захаров Владимир Захаров 15 января 2020 12:22 #

                Спасибо. Удалил. Теперь другая проблема, меню наезжает на шапку, перекрывает телефон и корзину и уменьшение margin-top: 34px мало помогает, все равно перекрывает из-за  z-index: 1000;, а без z-index: нельзя

                • +2

                  Вы внимательно видели что для .header прописаны marrgin-top: 34px? Если вы вставили то уберите комментарий также

                  • +1
                    Владимир Захаров Владимир Захаров 15 января 2020 12:51 #

                    Да, я уже сделал. Теперь все нормально. Спасибо. Осталось по мелочи - шрифты, цвета и выравнивание меню по высоте. 

                  • +1
                    Владимир Захаров Владимир Захаров 15 января 2020 14:39 #

                    Прошу прощения, kadurinho, как сделать строчку меню поменьше? Смотрел элемент в Ctrl+Shift+I, строчка состоит из двух элементов - верхняя ее часть, как и положено меню, а нижняя, почему-то боди и выделяется вместе со всем боди сайта. Вроде раньше такого не было. 

                    • +1
                      replicant replicant 15 января 2020 15:06 #

                      Ваше меню имеет много вложенных структур, поэтому начинайте распутывать клубок изнутри. Отступы и т.п. кроются внутри. В частности margin:20 px на скриншоте относится к li элементам, а не к самому внешнему блоку меню.

                      И не используйте никогда line-height так как оно сейчас используется. Это бессмысленно и бесполезно. Танцуйте от внутренних блоков и это поможет разобраться что влияет на высоту. Основную идею вам уже подсказали. Дальше сами. И не забывайте, что

                      .header {
                          margin-top: 93px; - влияет на визуальную высоту блока верхнего меню тоже, сделайте 300px и убедитесь сами.
                      }

                      Но это разные блоки. Вы не видите разницы, т.к. там фон одного цвета. Сделайте разный и все сразу понятно станет.




                      Основная идея такова: margin-top блока header должна равняться высоте блока header_top, тогда зазор будет нулевой и при уменьшении окна браузера и смене верстки при адаптации зазор не будет торчать. А насколько сделать его больше или меньше уже сами смотрите по месту. Фоны разного цвета помогут разобраться.
                      • +1
                        Владимир Захаров Владимир Захаров 15 января 2020 15:18 #

                        Понятно, да там даже не обязательно делать разного цвета. В файрфоксе при выборе "Исследовать элемент" и так видно, что верх состоит из разных блоков. Не могу понять, для чего? Как вообще убрать нижнюю половину меню? Она ведь не нужна, только мешает. Я ведь и так собирался менять цвет горизонтального меню, получается, придется менять его в двух блоках. Зачем такие сложности? И главное, выделяется нижняя часть только, как "боди", значит ее нужно искать в контенте, чтобы удалить?

                      • +1
                        Владимир Захаров Владимир Захаров 15 января 2020 15:24 #

                        Я понял, что мы редактировали только header_top, не понимаю, почему изменился размер обоих блоков? Ведь header не трогали

                        • +2
                          replicant replicant 15 января 2020 15:38 #

                          Ну как не трогали, когда было сначала 34px, потом стало 93px margin-top у .header. Пару раз в течение дня захожу и картинка все время разная.

                          В двух словах. Верх не состоит из двух блоков. Блок там всего один, но можно создать ситуацию, когда нижестоящий будет в наложении верхнего или наоборот с запасом по отступу. Блок .header_top находится над блоком .header и размещается по сути в отступе блока .header от верхнего края окна. А серый цвет над белым фоном блока .header - это не что иное как виднеющийся фон .body. Смена цвета .body покажет сразу что откуда торчит.

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

                          • +1
                            Владимир Захаров Владимир Захаров 15 января 2020 15:48 #

                            Ну да, было 34px, потом стало 93px, но ведь это же только отступы. Высоту ведь я не трогал Пришлось сделать побольше, потому что перекрывалась шапка, верхний телефон был не виден и половина корзины. И то, что под header_top у меня распознается, как боди, а не как header.

    • +1
      Александр Мамаев Александр Мамаев 14 января 2020 20:15 #

      А про какое у меню в теме Unishop идет речь?  Самое верхнее в ней содержит ссылки на статические страницы. Вы их хотите катать по экрану?

      P.S У этой темы на мой взгляд лучшая поддержка, спустя год без проблем отвечают и помогают решить вопрос. Отвечают в течении суток в рабочее время.

      • +1
        Владимир Захаров Владимир Захаров 15 января 2020 10:56 #

        Да, именно об этом меню речь. В принципе, можно его совсем убрать и сделать другое там же или под шапкой, это не так важно, главное, чтобы это меню можно было отредактировать под задачу. Из поддержки Unishop ответили сегодня утром. Написали, что такая опция в настройках темы не предусмотрена, нужно редактировать файлы темы. Положение осложняется еще и тем, что я работаю в этой конторе недавно и тема мне досталась в наследство от прежнего админа, причем, куплена тема была для другого домена. Конечно, это нельзя назвать пиратством, но я не уверен, что поддержка будет помогать при таких условиях.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите