Как сделать надпись в адаптивном меню?

голоса: 0

подскажите как добавить слово "МЕНЮ" ? в адаптивном варианте  сайта, а то клиенты не понимают и уходят 

 

На более больших разрешениях все норм

Адрес сайта kirovles.net
| Автор: | Категория: Дизайн сайта

Ответов: 1

Голоса: +1
 
Лучший ответ

В верхней части сайта найдите код:

<i class="fa fa-bars" title="Меню"></i>

добавьте выделенное.

Либо еще проще, замените этот код на следующий:

<i class="fa fa-bars" title="Меню"><span style="margin:0 5px;">Меню</span></i>

| Автор:
Выбор ответа лучшим | | Автор: Константин Владыкин

в моем случае код такой:

    <div class="top">  <div class="cnt clr">  <div class="top-links left">  <a href="mailto:info@kirovles.net"><i class="fa fa-envelope-o"></i> info@kirovles.net</a>  <a href="tel:+79063650547"><i class="fa fa-phone"></i> +7 (906) 365 05 47</a>  <a href="tel:+78312913947"><i class="fa fa-phone"></i> +7 (831) 291 39 47</a>  </div>  <div class="top-links right">  <a href="https://vk.com/kirovlesdzr"><i class="fa fa fa-vk"></i></a>  <a href="https://plus.google.com/+KirovlesNetDzr/"><i class="fa fa-google-plus"></i></a>  <a href="https://www.facebook.com/groups/kirovles/"><i class="fa fa-facebook"></i></a> <a href="https://www.youtube.com/c/KirovlesNetDzr"><i class="fa fa-youtube"></i></a>  <a href="https://www.instagram.com/kirovles/"><i class="fa fa-instagram"></i></a>    </div>  </div>  </div>  <header id="header" class="header-1 cnt">  <div id="logo" class="left" >  <a href="$HOME_PAGE_LINK$"><img src="/img/logo.png" alt="Pacifico"></a>  </div>  <nav  title="Меню" id="nav" >  <ul>  <li><a href="$HOME_PAGE_LINK$" class="menu-active-link">Главная</a></li>  <li class="with-submenu">  <a href="javascript:void(0)">Изготавливаем</a>  <ul>  <li><a href="/izgotovlenie-lestnic">Деревянные лестницы</a></li>  <li><a href="/izgotovlenie-dach-tualet">Дачные туалеты</a></li>  <li><a href="/izgotovlenie-mebeli">Мебель из дерева</a></li>  <li><a href="/mebel-dlya-bani">Мебель для бани</a></li>   </ul>  <li class="with-submenu">  <a href="javascript:void(0)">Прайсы</a>  <ul>  <li><a href="/price-lestnica">Комплектующие лестницы</a></li>  <li><a href="/assortiment">Ассортимент товара</a></li>  <li><a href="/price-lipa">Материалы из липа</a></li>  </ul>  </li>    <li><a href="/blog/">Блог</a></li>  <li><a href="/photo/">Фотоальбомы</a></li>   <li class="with-submenu">  <a href="javascript:void(0)">Стоит посмотреть</a>  <ul>  <li><a href="/o-nas">Страница "О Нас"</a></li>  <li><a href="/nashi-kontakty">Страница "Контактная информация"</a></li>   <li><a href="/koronastroi-nn">Страница "КоронаСтрой НН"</a></li>  </ul>  </li>   </ul>  <i class="fa fa-bars"></i>  </nav>  </header>    

Значит мне в стилях искать?
 

еще вопрос как порпавить значки соц. сетей в одну строчку?

Константин Владыкин,

Нет, не в стилях, а перед закрывающим тегом </nav>  как видим все присутствует, внимательней немного будьте))

Yuri_Geruk,
Нашел) спасибо! Как настчет второго вопроса?
Константин Владыкин,

В таблицу стилей CSS добавьте следующие стили:

@media screen and (min-width: 240px) and (max-width: 639px) { 
.right{float: left!important;}
}

это решит вашу проблему с иконками соц-сетей на мобильных устройствах.

...