Stack Overflow Asked by Aurelien on December 18, 2021
I have created a structure for a header and a sticky top navbar.
When we scroll down (medium screen and up), there is always a space line between my header and my navbar. We can see the body in that space.
Picture of the thin space line in yellow
I saw this come from the 3 buttons because when we deleted them, the space disapears but I don’t know how to solve the problem.
Any idea ?
Thank you
SOLVED
The problem came from the a class bottom border. I think they didn’t fit in the parent element.
Code after correction
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="container-fluid bg-danger">
<div class="row">
<div class="col-md-6 my-auto">
<a class="d-flex justify-content-center align-items-center" href="#">
<h1 class="text-center"><span class="ft-color-1">BRAND NAME</span></h1>
</a>
</div>
<div class="col-md-6 p-2">
<ul>
<li>Adress, city</li>
<li>Ouvert 7/7 de 7h à 21h</li>
</ul>
<div class="d-none d-md-flex flex-row mb-2">
<a class="btn p-1 mr-1 w-100 bg-primary text-left" href="" role="button"> Itinéraire</a>
<a class="btn p-1 mr-1 w-100 bg-primary text-left" href="" role="button"> Contact</a>
<a class="btn p-1 mr-0 w-100 bg-primary text-left" href="" role="button"> Suivez-nous</a>
</div>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-expand-md sticky-top bg-primary" id="navigation-barre">
<a class="navbar-brand text-white" href="#"> Brand name</a>
</nav>
<section class="bg-warning">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</section>Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP