I have a problem related to sticky nav, basically it works and it is beautiful, but when inserting the bootstrap it overlaps the sticky, I could only fix it by removing the bootstrap and doing everything from the site in css. But I would like to increase the bootstrap. I am already 4 hours breaking my head, if anyone can help me, thank you.
Follow the HTML code:
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})html,
body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue", sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(design.png) no-repeat 50% 50%;
background-size: cover;
}
.div1 {
width: 100%;
height: 100vh;
background: url(after4.jpg) no-repeat 50% 50%;
background-size: cover;
}
.div2 {
width: 100%;
height: 100vh;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
img {
height: 150px;
width: 150px;
margin-top: 80px;
}
.img2 {
height: 100%;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
@media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">LOGO
</div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">menu1</a>
</li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
</nav>
</header>
<div id="team" class="team">
<div class="container">
<div class="row">
<h2 class="wow rubberBand">Serviços</h2>
<div class="col-lg-3 col-md-3 wow fadeInLeft" data-wow-delay="1.5s">
<img src="" class="img-circle" alt="">
<h4>Texto1</h4>
<p>texto informativo.</p>
</div>
<div class="col-lg-3 col-md-3 wow fadeInLeft" data-wow-delay="1.2s">
<img src="" class="img-circle" alt="">
<h4>texto2</h4>
<p>texto informativo</p>
</div>
<div class="col-lg-3 col-md-3 wow fadeInLeft" data-wow-delay="0.8s">
<img src="" class="img-circle" alt="">
<h4>texto3</h4>
<p>texto informativo</p>
</div>
<div class="col-lg-3 col-md-3 wow fadeInLeft" 0.5>
<img src="" class="img-circle" alt="">
<h4>texto4</h4>
<p>texto sobre a foto.</p>
</div>
</div>
</div>
</div>Image:
