Перейти к содержимому


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


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 sandra.005@mail.ru

sandra.005@mail.ru

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

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

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

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

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

  • Screenshot_20171003-171653.jpg
  • Screenshot_20171003-171755.jpg


#2 Stasya

Stasya

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

  • Модераторы
  • 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

sandra.005@mail.ru

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

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

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

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

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

  • Безымянный.jpg
  • Screenshot_20171011-205726.jpg


#4 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

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

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

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

#5 Ирина345

Ирина345

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

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

Отправлено 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;}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных