Адаптивная навигационная панель с панелью поиска onclick - PullRequest
Новая
       19

Адаптивная навигационная панель с панелью поиска onclick

0 голосов
/ 09 мая 2018

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

У меня это работает в режиме рабочего стола, но я борюсь с мобильным представлением.

Основная проблема, с которой я столкнулся, заключается в том, что я не могу свернуть панель поиска, поэтому при нажатии на увеличительное стекло панель поиска появится под панелью навигации. Выстроены все 5 иконок, чтобы они выглядели аккуратно.

Ниже я прикрепил 3 изображения:

Первый, где я сейчас нахожусь с моего сайта Второй сайт - это то, чего я хочу достичь В-третьих, как это выглядит в режиме рабочего стола с работающей панелью поиска.

imagefirst image"> Second Image enter image description here

Я также приложил js Fiddle со всем содержимым, которое у меня есть в настоящее время.

https://jsfiddle.net/kLo8x29u/

  <div class="topnav" id="myTopnav">      

  <a class='home'href="#">Home</a>
  <a href="#">Building Materials</a>
  <a href="#">Timber and Hardwood</a>
  <a href="#">Landscaping</a>
  <a href="#">Kitchens and Bathrooms</a>
  <a href="#">Tools</a>
  <a href="#">Flooring</a>
  <a href="#">Tool Hire</a>
  <a class='timber' href="#a">Timber Enginering</a>

       <a href="javascript:void(0);" class="icon" onclick="myFunction()">
   <i class="fa fa-bars" style="font-size:56px"><p>Home</p></i>
  </a>
    </div>

Заранее спасибо!

1 Ответ

0 голосов
/ 09 мая 2018

Если вы хотите выровнять свои значки, вы должны поместить значки и меню в один div с идентификатором; Затем вы задаете ему относительную позицию и отображаете встроенный блок. После этого все значки должны быть смещены влево, чтобы они были расположены в линию. То, как у вас есть код, вы не сообщаете ему, что хотите, чтобы значки располагались рядом :), если вам все еще нужна помощь, я могу помочь вам

...