Bootstrap-przy scrollowaniu elementy najezdzaja na navbar

Question

Witam, tak jak w temacie przy scrollowaniu elementy diva top najezdzaja na navbar siedze nad tym juz mnostwo czasu, wiec pora chyba spytac kogos madrzejszego....

<nav class="navbar navbar-expand-lg navbar-light bg-light text-uppercase">
			<a class="navbar-brand" href="#">
	        	<img class="logo" src="img/logo.png" alt="">
	        </a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
		    	<span class="navbar-toggler-icon"></span>
		  	</button>
		  <div class="collapse navbar-collapse" id="navbarNav">
			    <ul class="navbar-nav text-center ml-auto">
			    	<li class="nav-item d-none d-lg-inline social">
			    		<a class="nav-link" href="#"><i class="demo-icon icon-phone-squared"></i>531-995-541<a>
			    	</li>
			    	<li class="nav-item d-none d-lg-inline social">
			    		<a class="nav-link" href="#"><i class="demo-icon icon-facebook-squared"></i></a>
			    	</li>
			    	<li class="nav-item d-none d-lg-inline social">
			    		<a class="nav-link" href="#"><i class="demo-icon icon-mail-squared"></i></a>
			    	</li>
			    	<li class="nav-item d-none d-lg-inline social mr-lg-5">
			    		<a class="nav-link" href="#"><i class="demo-icon icon-instagram"></i></a>
			    	</li>
			    	<li class="nav-item px-lg-3">
			    		<a class="nav-link" href="#">Kim jestem</a>
			    	</li>
			    	<li class="nav-item  px-lg-3">
			    		<a class="nav-link" href="#">Oferta</a>
			    	</li>
			    	<li class="nav-item mr-lg-4  px-lg-3">
			    		<a class="nav-link" href="#">Kontakt</a>
			    	</li>
			    </ul>
		  	</div>
		</nav>
<div class="top">
		<div class="container-fluid text-center">
			<p class="top-text text-white text-uppercase">lorem ipsum is simply</p>
			<p class="top-text2"><i>Lorem ipsum is simply dummy text</i></p>
			<button class="btn btn-danger my-3 px-3">Sprawdź ofertę</button>
		</div>
		<div class="social-sm mr-auto">
				<i class="demo-icon icon-phone-squared d-block d-lg-none text-white"></i>
				<i class="demo-icon icon-facebook-squared d-block d-lg-none text-white"></i>
				<i class="demo-icon icon-mail-squared d-block d-lg-none text-white"></i>
				<i class="demo-icon icon-instagram d-block d-lg-none text-white"></i>
		</div>
	</div>

	<div class="container-fluid">
		<div class="about">
			<div class="row">
				<div class="col-lg-8">
					<p class="text-uppercase">Kim jesteśmy?</p>
					<p class="text-uppercase">dlaczego<span> powinieneś nas wybrać?</span></p>
				</div>
				<div class="col-lg-4">
					<img src="img/about.jpg" class="img-fluid">
				</div>
			</div>
		</div>
	</div>

.navbar {
  top: 0;
  width: 100%;
  position:fixed;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.bg-light{
	background: transparent !important;
	transition: 800ms ease;
}

.bg-light.scrolled{
	background: #6904a2 !important;
}

	$(window).scroll(function(){
		$('nav').toggleClass('scrolled', $(this).scrollTop() > 300);
	});

 

Comments

dobra, ogarnalem sam, zamykam :D