I built a navigation panel using bootstrap. I have a problem with the mobile version of my website.
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
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.
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.