Bootstrap navbar значок социальных сетей мобильная версия

Question

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

Вот пример кода! .

Я пытался восстановить его, но проект все время ломался.

<nav class="navbar navbar-default navbar-fixed-top font">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>   
      </button>
      <a href="#up" class="navbar-brand">
    <img src="images/logo.jpg" alt="Logo" style="width:100px;">
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#about">O MNIE</a></li>
        <li><a href="#work">JAK PRACUJEMY</a></li>
        <li><a href="#portfolio">PROJEKTY</a></li>
        <li><a href="#contact">KONTAKT</a></li>
            <li class="nav-item"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>
            <li class="nav-item"><a class="nav-link" href=""><i class="fab fa-instagram"></i></a> </li>
        </ul>
  </div>
</div>

Самый простой способ объяснить эффект - отправить вам фотографии.

перед:

---

после

Answer 1

Похоже, вы могли бы добавить свои иконки социальных сетей в другой элемент div, расположенный рядом с кнопкой мобильного устройства, и использовать d-md-блок d-none, чтобы отображать их в мобильном телефоне и скрывать их в увеличенном виде. Вам также нужно будет обновить ваш css, чтобы использовать css lib в Bootstrap 4.

 <div class="d-flex justify-content-between">      
    <div class="d-block d-md-none">
    <a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a>
    <a class="nav-link" href=""><i class="fab fa-instagram"></i></a>
    </div>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>   
    </button>
    <a href="#up" class="navbar-brand">
      <img src="images/logo.jpg" alt="Logo" style="width:100px;">
    </a>
</div>

А затем в вашей обычной навигации:

    <li class="nav-item d-none d-md-block"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>
    <li class="nav-item d-none d-md-block"><a class="nav-link" href=""><i class="fab fa-instagram"></i></a></li>

Answer 2

Вы можете добавить вторую пару значков социальных сетей, а затем вручную скрыть элементы с определенной шириной с помощью правила @media. Это бы выглядело так, как будто они переехали, когда все, что вы на самом деле делали, это прятали одного из них.

Вот как вы это делаете:

Добавьте это в html сразу после вашего navbar-бренда:

<div class="collapse-social-icons">
  <a class="navbar-brand" href=""><i class="fab fa-facebook"></i></a>
  <a class="navbar-brand" href=""><i class="fab fa-instagram"></i></a>
</div>

и класс collapse-social-icons-dropdown для значков, которые вы хотите скрыть на маленьких экранах. Как это:

<li class="nav-item collapse-social-icons-dropdown"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>

Затем я добавил это к CSS:

/* This is to float the social incons to the right */
.collapse-social-icons {
  position: relative;
  float: right;
  margin-right: 10px;
}

/* This is to add the same hover-effect as the other menu items */
.collapse-social-icons a:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* This is to hide the "new" set of icons on big screens */
@media only screen and (min-width: 767px) {
  .collapse-social-icons {
    display:none !important;
  } 
}

/* This is to hide the "old" set of icons on small screens */
@media only screen and (max-width: 767px) {
  .collapse-social-icons-dropdown {
    display:none !important;
  } 
}

Правило @media в css применяется, когда ширина страницы меньше 767 пикселей. Вы можете изменить это так, как вам угодно, и вы также можете указать максимальную ширину, если хотите.

Проверьте это здесь https://codepen.io/wenzzzel/pen/jXQVNv