Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

1

Мобильная Версия

Автор sandra.005@mail.ru, 03 окт. 2017 17:23

Авторизуйтесь для ответа в теме

Сообщений в теме: 4

#1 sandra.005@mail.ru

Активный участник

Пользователи
527 сообщений

Отправлено 03 Октябрь 2017 - 17:23

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

Прикрепленные изображения

Наверх

#2 Stasya

Активный участник

Модератоpы
4 007 сообщений

Отправлено 11 Октябрь 2017 - 11:15

sandra.005@mail.ru (03 Октябрь 2017 - 17:23) писал:

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

Здравствуйте. Для начала в шаблоне HTML найдите код

<body>
<div style="width:100%; background:#939183;">

и замените его на

<body>
<div style="width:100%; background:#939183;" class="topHeaderTel">

Далее найдите код (147 строка )

<div style="width:100%; background:#fffdef;">

и замените его на

<div style="width:100%; background:#fffdef;" class="headerLogo">

Найдите блок

<div style="float:right;margin-top:15px;">
	 <!--search-->

и замените его на

<div style="float:right;margin-top:15px;" class="searchHeaderBlock">
	 <!--search-->

Затем найдите код

<div style="float:right;margin:0 0 30px 0; max-width:1000px;">
				 <ul class="menuWrapw" >

и заменит его на

<div style="float:right;margin:0 0 30px 0; max-width:1000px;" class="mainTopMenu">
				 <ul class="menuWrapw" >

Затем найдите код

<div style="width:100%; background:#fffdef;" class="headerLogo">

и перед ним вставьте

<div style="float:right;margin:0 0 30px 0; max-width:1000px;">
<a class="linkMobTopMenu">Меню</a>
				 <ul class="menuWrapw" >
				 <li class="cathead"><a class="menuparent" href="{CATALOG_URL}">Каталог</a>
	<ul class="conncat accordion111">
{%FOR catalog%}
<li id="katt" >
<a href="{catalog.URL}#start_items" class="accAnchor111">{catalog.NAME}</a>
</li><li id="katt">|</li>
{%ENDFOR%}
	</ul>
</li>
		   
				 <li>|</li>
				 {% FOR menu %}
				   {% FOR header %}
					 {% FOR links %}
							   <li  ><a class="menuparent {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" href="{menu.header.links.URL}"
							   {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li><li>|</li>
					 {% ENDFOR %}
				   {% ENDFOR %}
				 {% ENDFOR %}
				 <li><a class="menuparent " href="#" onclick="openbox('Wrapp');return false;" title="КАК ЗАКАЗАТЬ">КАК ЗАКАЗАТЬ</a></li><li>|</li>
				   <li><a class="menuparent "  href="#" onclick="openbox('Wrapp2');return false;" title="ОПЛАТА каффов и украшений из фильмов">Оплата</a></li><li>|</li>
					<li><a class="menuparent " href="#" onclick="openbox('Wrapp3');return false;" title="ДОСТАВКА каффов и украшений из фильмов по всей России">Как получить заказ</a></li><li>|</li>
					
						  <li><a class="menuparent " href="#" onclick="openbox('Wrapp5');return false;" title="Мастерам">Контакты</a></li>
								</ul>
<br> <div class="text_header"><a>
   
</a></div>
  </div>

В файле main.css найдите код

@media only screen and (max-width:480px){

и сразу после него вставьте код

.topHeaderTel {display:none}
.headerLogo{float:none !important;margin:0 auto;text-align:center;width: 130px;}
.headerLogo img{width:120px}
.searchHeaderBlock{float:none !important}
div#cart111{position:absolute;right:0;left:inherit;top:20px}
.mainTopMenu{display:none}
.mobTopMenu {float:left !important;padding: 0 0 30px 0;margin: 30px 0  0 -5px;}
.mobTopMenu .menuWrapw{display:none;position:absolute;z-index:99;background: #fffdf0;left:0;border: 1px solid #76cab3;}
.mobTopMenu .menuWrapw>li{display:block;}
.mobTopMenu .menuWrapw>li:nth-child(2n){display:none}

В конец файла main.js добавьте блок

$(document).ready(function(){
$('.linkMobTopMenu').click(function(){
	$(this).parent().find('.menuWrapw').toggle();
return false;
})
})

Наверх

#3 sandra.005@mail.ru

Активный участник

Пользователи
527 сообщений

Отправлено 11 Октябрь 2017 - 20:59

Попробовала. Прилагаю фото с компьютера и телефона.
Вернула к старому бекапу.
С компьютера задвоилось меню. С телефона шапка все равно растянута

Прикрепленные изображения

Наверх

#4 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 12 Октябрь 2017 - 06:53

Здравствуйте.

Сохраните изменения, чтобы на основе результатов мы могли написать корректирующую инструкцию.

Наверх

#5 Ирина345

Активный участник

Модераторы
5 709 сообщений

Отправлено 16 Октябрь 2017 - 13:36

sandra.005@mail.ru (11 Октябрь 2017 - 20:59) писал:

Попробовала. Прилагаю фото с компьютера и телефона.
Вернула к старому бекапу.
С компьютера задвоилось меню. С телефона шапка все равно растянута

Здравствуйте, найдите в шаблоне hTML

<div style="float:right;margin:0 0 30px 0; max-width:1000px;">
<a class="linkMobTopMenu">Меню</a>

замените на

<div style="float:right;margin:0 0 30px 0; max-width:1000px;" class="menu_block">
<a class="linkMobTopMenu">Меню</a>

далее найдите в шаблоне hTML

<div style="float:left;padding:30px 0 30px 5px;" >
  <a href="{INDEX_PAGE_URL}">
		  
			  <img src="{ASSETS_IMAGES_PATH}logo.png"/>
			 
			 </a>

замените на

<div style="float:left;padding:30px 0 30px 5px;" class="logo_img">
  <a href="{INDEX_PAGE_URL}">
		  
			  <img src="{ASSETS_IMAGES_PATH}logo.png"/>
			 
			 </a>

далее найдите в файле main.css код

@media only screen and (max-width:480px){
  .menuWrapw, .topHeaderTel {display:none}
.headerLogo{float:none !important;margin:0 auto;text-align:center;width: 130px;}
.headerLogo img{width:120px}
.searchHeaderBlock{float:none !important}

замените на

.menu_block {display:none;}
@media only screen and (max-width:480px){
  .menuWrapw, .topHeaderTel {display:none}
.menu_block {display:block;}
.headerLogo{float:none !important;margin:0 auto;text-align:center;width: 130px;}
.logo_img { margin-top: -23px;}
.headerLogo img{width:120px}
.searchHeaderBlock{float:none !important;margin: 0 !important;}