[Найдено] Плавающая шапка (sticky menu)

KoreybaDenis · 18 червня 2016

Добрый день, нужен этот модуль https://opencartforum.com/files/file/1514-sticky-menu-vqmod/ для OC 2.1.0.2.

К сожалению самому поменять не получилось. Шапка то плавает, то все другие элементы на находятся "выше" ее и закрывают ее: http://prntscr.com/bhzkrx

Цель модуля: сделать шапку (элемент с контактами) сделать плавающей.

Заранее спасибо за помощь.

ArtemPitov · 18 червня 2016

z-index

KoreybaDenis · 18 червня 2016

z-index

Ни о чем не говорит простому смертному. Можно пожалуйста подробнее?

KoreybaDenis · 18 червня 2016

а так?

Так конечно лучше. Но я не очень силен в HTML,CSS, только базовые знания.

Кроме того у меня еще проблема - меню съехало влево.

Я вряд ли сам смогу пофиксить существующий модуль и поэтому пытаюсь найти такой же под версию 2.х

ArtemPitov · 18 червня 2016

Так конечно лучше. Но я не очень силен в HTML,CSS, только базовые знания.

Кроме того у меня еще проблема - меню съехало влево.

Я вряд ли сам смогу пофиксить существующий модуль и поэтому пытаюсь найти такой же под версию 2.х

Это всего пару строчек, ссылку на сайте дайте по другому тут не помогут

KoreybaDenis · 19 червня 2016

Пожалуйста, вот сайт: https://test.heymay.com.ua/

Вот скрипт который вставил в шапку:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.sticky.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
		$("#top").sticky({ });
		});
		</script>
		<style type="text/css"> #scroll{width:980px; height:40px; padding-bottom: 15px; margin-left:auto; margin-right:auto; z-index:9999;} </style>

Kiyoshi · 19 червня 2016

Здравствуйте KoreybaDenis скрипт можете удалить, в место него пропишите класс navbar navbar-default navbar-fixed-top в <nav>

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div id="top-links" class="nav pull-right">
<ul class="list-inline">
<li><a href="//heymay.com.ua/time-and-contacts"><i class="fa fa-phone"></i></a> <span>(067) 964-96-59, (093) 604-71-64</span> <span class="hidden-xs hidden-sm hidden-md">; <b>Skype:</b> snejana_cassie</span></li>
<!-- ������ �������
<li class="dropdown"><a href="https://test.heymay.com.ua/index.php?route=account/account" title="Личный кабинет" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md">Личный кабинет</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
                        <li><a href="https://test.heymay.com.ua/index.php?route=account/simpleregister">Регистрация</a></li>
            <li><a href="https://test.heymay.com.ua/index.php?route=account/login">Войти</a></li>
                      </ul>
        </li>
-->
<li><a href="http://test.heymay.com.ua/index.php?route=checkout/cart" title="Корзина"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Корзина</span></a></li>
<li><a href="index.php?route=checkout/simplecheckout" title="Оформить заказ"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">Оформить заказ</span></a></li>
</ul>
</div>
</div>
</nav>

Змінено 19 червня 2016 користувачем Kiyoshi

KoreybaDenis · 19 червня 2016

Kiyoshi, это просто пятерочка! Это супер! Это лучшее решение!)

Спасибо большое! И подумать не мог что все так просто!

Хорошо однако знать бутстрап)

Один маленький нюанс. Оно сьело некоторые элементы сайта: http://prntscr.com/bidsl3 (логотип, поиск, корзину)

Змінено 19 червня 2016 користувачем KoreybaDenis

ArtemPitov · 19 червня 2016

Kiyoshi, это просто пятерочка! Это супер! Это лучшее решение!)

Спасибо большое! И подумать не мог что все так просто!

Хорошо однако знать бутстрап)

Один маленький нюанс. Оно сьело некоторые элементы сайта: http://prntscr.com/bidsl3 (логотип, поиск, корзину)

сделайте отступ margin-top у header

Kiyoshi · 19 червня 2016

Вам нужно прописать margin-top: 50px для <body> сделать вы это можете в два способа через css или в самом шаблоне.

Первый способ

/catalog/view/theme/default/stylesheet/stylesheet.css

body {
font-family: 'Open Sans', sans-serif;font-weight: 400;
color: black;
font-size: 12px;
line-height: 20px;
width: 100%;
margin-top: 50px; /* Новое правило */}

Второй

<body class="common-home" style="margin-top: 50px;">

Или как порекомендовал ArtenPitov

Змінено 19 червня 2016 користувачем Kiyoshi

KoreybaDenis · 19 червня 2016

Класс! Оба варианта работают! Спасибо большое, ребята!

Kiyoshi · 19 червня 2016

Пожалуйста.

Вхід

[Найдено] Плавающая шапка (sticky menu)

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information