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


Вывод Окна Поиска В Шапке Под Заголовками Меню

поиск

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

#1 metry

metry

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

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

Отправлено 23 Январь 2021 - 20:42

Для внесения изменений зайдите в Редактор шаблонов-->HTML и найдите:


	   <!-- Меню в шапке -->
	   <ul class="menunav" itemscope itemtype="https://schema.org/SiteNavigationElement">
		{% FOR menu %}
		 {% FOR header %}
		  {% FOR links %}
		   <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li>
		  {% ENDFOR %}
		 {% ENDFOR %}
		{% ENDFOR %}
	   </ul>
	   {% ENDIF %}
	  </div>

после него вставьте:


	<div class="header-search-one">
	 <div class="search-hover">
	  <form id="search_mini_form_one" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
	   <div class="form-search">
		<input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину...">
		<input type="hidden" name="goods_search_field_id" value="0">
		<button type="submit" title="Искать" class="fa fa-search"></button>
	   </div>
	  </form>
	  </div>
	 </div>

далее зайдите в Редактор шаблонов-->main.css и в самый конец кода вставьте:


#header {margin-bottom: 10px;}
#header .header-search-one {position: relative;clear: both;text-align: center;margin: 0 auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-end;align-items: center;align-content: stretch;}
#header .header-search-one .search-hover {position: relative;margin-top: 10px;}
#header .header-search-one:hover .search-hover {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header .header-search-one .search-hover .form-search {position: relative;z-index: 1000;padding: 0;float: right;background: #fff;border: 1px solid #e5e5e5;width: 300px;}
#header .header-search-one .search-hover .form-search input {font-size: 13px;float: left;margin: 0;border: none;background: none;padding: 6px 10px;color: #b6b6b6;width: 300px;height: 43px;line-height: 43px;padding-right: 60px;}
#header .header-search-one .search-hover .form-search button {position: absolute;top: -1px;right: 5px;outline: 0;}
#header .header-search-one .search-hover .form-search .fa-search {font-size: 16px;color: #333744;line-height: 43px;padding: 0 17px;width: 50px;background: transparent;float: right;margin-bottom: 0;border: 0;}
#header .header-search-one .search-hover .form-search .fa-search:hover {color: #fff;background: #09afe7;cursor: pointer;}

@media all and (max-width: 992px) {
 #header .header-search-one {position: relative;clear: both;text-align: center;margin: 0 auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: center;align-content: stretch;}
} 






Темы с аналогичным тегами поиск

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

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