Bootstrap slider goes behind navbar

Question

im trying to create a page with a slider under a navbar but the slider goes behind the navbar.

I searched online and i saw another question with an answer saying to add the top margin to the body and it worked, but when you change slide it starts spasming up and down, and that was "margin-top" fault.

    <div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand js-scroll-trigger" href="#page-top">
                    <img alt="Brand" src="Resources/img/logo.png">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#about">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#services">Informatica</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#contact">Contatti</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <div id="sliderImmagini" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
        <li data-target="#sliderImmagini" data-slide-to="0" class="active"></li>
            <li data-target="#sliderImmagini" data-slide-to="1"></li>
            <li data-target="#sliderImmagini" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="Resources/img/slider/slide-1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="Resources/img/slider/slide-2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="Resources/img/slider/slide-3.jpg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#sliderImmagini" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Precendente</span>
        </a>
        <a class="carousel-control-next" href="#sliderImmagini" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Prossimo</span>
        </a>
    </div>

So now im still stuck with a slider behind the navbar, any help would be apreciated thanks.

You're trying to get make a slider under the navbar but the slider is under the navbar? lol So what's the problem? — KidBilly, Dec 21 '18 at 15:53
maybe i explained it wrong, im trying to make a homepage with a navbar and under it a slider, but the top part of the slider gets cut out by the navbar — Nome Cognome, Dec 21 '18 at 15:57
Oh ok. I think you mean that you want the slider UNDER the navbar, but instead it goes BEHIND the navbar. Is that right? — KidBilly, Dec 21 '18 at 16:00

score 1 · Accepted Answer · answered Dec 21 '18 at 16:46

If you know the height of the .navbar, you can set a margin-top on the .carousel to force it down the page that amount. This is happening because the .navbar is fixed. This means that you can scroll down the page and have the .navbar stay in place at the top of the page.

Sample:

.navbar{
  border:3px solid orange;
}
.carousel{
  border: 3px solid green;
  margin-top: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand js-scroll-trigger" href="#page-top">
                    <img alt="Brand" src="Resources/img/logo.png">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#about">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#services">Informatica</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link js-scroll-trigger" href="#contact">Contatti</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
</div>
<div id="sliderImmagini" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
        <li data-target="#sliderImmagini" data-slide-to="0" class="active"></li>
            <li data-target="#sliderImmagini" data-slide-to="1"></li>
            <li data-target="#sliderImmagini" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="https://i.cdn.turner.com/ads/adspaces/CNN/2018/12/10/840622774_LoveGilda_CNNFilms_1100x619_NewYearsDay.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://cdn.cnn.com/cnnnext/dam/assets/181220163944-01-week-in-photos-1221-super-169.jpg" alt="Third slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#sliderImmagini" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Precendente</span>
        </a>
        <a class="carousel-control-next" href="#sliderImmagini" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Prossimo</span>
        </a>
    </div>
    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>
        <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>    <p>
    lkjsdlkajsdlkjalskdjlakjsd
    </p>

did you atleast read what i tried? i said that i already added margin top but when the slide changes it glitches up and down. — Nome Cognome, Dec 22 '18 at 11:09
Yes, I read what you said. You said you added margin top to the body. I didn't. And I provided a working example to show you how it should work, using the markup that you provided. — Jonathan, Dec 22 '18 at 16:00

Bootstrap slider goes behind navbar

1 Answers1