Bootstrap导航栏社交媒体图标移动版本

Question

I built a navigation panel using bootstrap. I have a problem with the mobile version of my website.

Here is a sample on codepen .

I tried to rebuild it, but the project breaks down all the time.

<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>

The easiest way for me to explain the effect is by sending you photos.

before:

---

after

Answer 1

You could add a second pair of social media icons and then manually hide elements at certain widths with the @media rule. That would make it look like they've moved when all you really did was hide one of them.

This is how you do it:

Add this to the html right after your navbar-brand:

<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>

and the class collapse-social-icons-dropdown to the icons that you want to hide on small screens. Like this:

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

Then I added this to the 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;
  } 
}

The @media rule in the css applies when the width of the page is smaller than 767px. You can modify that anyway you want and you can allso specify a max-width if you want to.

Check it out here https://codepen.io/wenzzzel/pen/jXQVNv

Answer 2

Seems like you could add your social icons inside another div that is adjacent to the mobile button and utilize the d-none d-md-block to display them in mobile and hide them in larger views. You will also need to update your css to use Bootstrap 4's css lib.

 <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>

And then in your regular nav:

    <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>