Witam,
chciałbym zrobić do mojego projektu rozwijane menu, które działało by tylko na wersji mobile do 800px, powyżej strona nie miała by już przycisku tzw. hamburger'a tylko normalną nawigację.
<div class="container">
<!--logo-->
<div id="logo">
...
</div>
<div class="hamburger">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<!-- Navigation -->
<nav>
<div class="row">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">O nas</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-teamwork" role="tab" aria-controls="pills-profile" aria-selected="false">Współpraca</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-gallery" role="tab" aria-controls="pills-contact" aria-selected="false">Galeria</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Kontakt</a>
</li>
</ul>
</div>
</nav>
@media screen and (max-width: 800px) {
.fa-bars {
font-size: 40px;
display: block;
float: right;
color: #cf6518;
padding: 5px 0 0;
margin-right: 10px; }
.container {
border: 0; }
.container nav {
background: #2a2b2b;
border-radius: 0; }
.container .nav-pills {
flex-direction: column; } }
@media (min-width: 801px) {
.fa-bars {
display: none; } }
.container {
height: 100vh;
border-left: 1px solid black;
border-right: 1px solid black; }
.container .tab-pane img {
border: 1px solid black;
width: 100%;
height: 300px; }
.container nav {
border-radius: 5px;
padding-top: 10px;
display: flex;
justify-content: space-around;
background: #160fcd; }
.container nav .nav-pills {
list-style-type: none; }
.container nav .nav-pills .nav-item {
display: flex;
justify-content: center;
flex-direction: row; }
@media screen and (max-width: 800px)
{
.fa-bars
{
font-size: 40px;
display: block;
float: right;
color: rgb(207, 101, 24);
padding: 5px 0 0;
margin-right: 10px;
}
.container
{
border: 0;
nav
{
background:rgb(42, 43, 43);
border-radius: 0;
}
.nav-pills
{
flex-direction: column;
}
}
}
@media (min-width: 801px)
{
.fa-bars
{
display: none;
}
}
.hamburger
{
height: 50px;
background: rgba(9, 8, 8, 0.97);
}
.container
{
height: 100vh;
border-left: 1px solid black;
border-right: 1px solid black;
.tab-pane
{
img
{
border: 1px solid black;
width: 100%;
height: 300px;
}
}
nav
{
border-radius: 5px;
padding-top: 10px;
display: flex;
justify-content: space-around;
background: rgb(22, 15, 205);
.nav-pills
{
list-style-type: none;
.nav-item
{
display: flex;
justify-content: center;
flex-direction: row;
}
}
}