Как сделать отзывчивую навигационную панель только с изображениями - PullRequest
Новая
       8

Как сделать отзывчивую навигационную панель только с изображениями

0 голосов
/ 12 апреля 2020

Это немного необычно, но я пытаюсь сделать навигационную панель с изображениями.

У меня есть 5 разных изображений, и 4 из них - кнопки, но когда я пытаюсь изменить размер к телефону , панель навигации крошечная, и я хочу сделать что-то, чтобы держать панель навигации опрятной, как панель открытия и закрытия гамбургера только для телефонов 

.Navigation {
  background-color: lightgrey;
  text-align: center;
  border-color: black;
  border-radius: 50px
}

.hover :hover {
  margin-bottom: 10px;
  width: 15%;
  height: auto;
}
<div class="Navigation" style="margin:0px">
  <p>
    <a href=" firstpage.html " class="hover"><img src="https://i.ibb.co/j6w5bwJ/home.png" alt="home" width="197px" height=" 140px"></a>
    <a href=" secondpage.html " class="hover"><img src="https://i.ibb.co/41KN9Dt/about-us.png" alt="about-us" width="197px" height=" 140px"></a>
    <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale" alt="Logo" width="207px" height=" 155px">
    <a href=" thirdpage.html " class="hover"><img src="https://i.ibb.co/xhDgDt7/cocntact.png" alt="contact" width="197px" height=" 140px"></a>
    <a href=" fourthpage.html " class="hover"><img src="https://i.ibb.co/VQJgjTq/gallery.png" alt="gallery" width="197px" height=" 140px"></a>
  </p>
</div>

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

Этот код только работает на больших экранах, и мне бы очень хотелось, чтобы кто-нибудь помог мне создать такой, который бы хорошо смотрелся на маленьких экранах, например, на планшете или телефоне.

...