CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-4navbar
samacker77so
samacker77so

Reputation: 55

How do I adjust the slider under navbar?

I am working on a website, what I want to achieve is that the navbar of my page stacked over the slider. I have tried z-index property.

My HTML Code:

<nav class="navbar navbar-expand-md bg-danger navbar-dark sticky-top container custom-navi" style="z-index: 2">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>

<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Messages</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">More</a>
        </li>
    </ul>
</div></nav>

What I want to achieve is shown in the below image : enter image description here

What I have right now is :

enter image description here

Upvotes: 0

Views: 990

Answers (3)

Hamid
Hamid

Reputation: 908

if you wana put your slider behind your navbar try the below css code for your slider and navbar

.slider{
position:absolute;
top:0;
z-index:0;
}
.navbar-nav{
z-index:1;
}

Upvotes: 0

Cjmarkham
Cjmarkham

Reputation: 9681

The fixed-top answer by ZimSystem is a good one, but in the event that you don't want the position to be fixed, you could set the navbar to be absolute. Bootstrap 4 has the class position-absolute for that (though it would take more work to center the navbar horizontally).

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362450

Bootstrap 4 has class the fixed-top for this purpose.

<nav class="navbar navbar-expand-md bg-danger navbar-dark fixed-top custom-navi">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>

<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Messages</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">More</a>
        </li>
    </ul>
</div></nav>

Upvotes: 1

Related Questions