<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<div class="container">
<div class="row">
<h2>Bootstrap Navbar Over Carousel By (SCHAUHAN.IN) </h2>
</div>
</div>
<div class="top_nav">
<div class="container">
<div class="row">
<div class="col-md-6 col-12 col-12 text-left"><i class="fa fa-phone"></i> +91-0000000000 | <i class="fa fa-envelope"></i> info@example.com</div>
<div class="col-md-6 col-12 col-3 donate ml-auto">
<ul class="float-right">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a class="mybt" href="#">Donate Now</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid mynav">
<nav class="navbar navbar-expand-lg navbg static-top">
<div class="container">
<img src="http://schauhan.in/Examples/Navbar-over-carousel/images/logo.png" alt="">
<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"><i class="fa fa-navicon"></i></span>
</button>
<div class="collapse navbar-collapse navi" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">About Company</a>
<a class="dropdown-item" href="#">Vision & Mission</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="A1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Our Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Logo Designing</a>
<a class="dropdown-item" href="#">Graphics designing</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="A2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Web
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Static Website</a>
<a class="dropdown-item" href="#">Dynamic Website</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Clients</a></li>
<li class="nav-item"><a class="nav-link" href="http://www.schauhan.in/how-to-earn-money-with-amazon-affiliate-marketing/">Amazon Affiliate Program</a></li>
<li class="nav-item"><a class="nav-link" href="http://www.schauhan.in/bootstrap-navbar-overtop-carousel/">SCHAUHAN.IN</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="slider">
<div class="bg"></div>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://schauhan.in/Examples/Navbar-over-carousel/images/slider/1.jpg" width="100%">
</div>
<div class="carousel-item">
<img src="http://schauhan.in/Examples/Navbar-over-carousel/images/slider/2.jpg" width="100%">
</div>
<div class="carousel-item">
<img src="http://schauhan.in/Examples/Navbar-over-carousel/images/slider/3.jpg" width="100%">
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
body
{
font-family: 'Open Sans' ;
}
h1,h2,h3,h4,h5,h6,ul,li,p
{
margin:0px;
padding:0px;
}
body::-webkit-scrollbar {
width: 5px;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
}
body::-webkit-scrollbar-thumb {
background-color: #333;
outline: 1px solid #000;
}
h1,h2,h3,h4,h5,h6,p,ul,li { margin:0px; padding:0px; }
.container-fluid { padding: 0px;}
.bg-dark
{
background-color: transparent;
}
.slider
{
position:relative;
z-index:1;
}
.bg
{
position:absolute;
background:rgba(0,0,0,0.7);
left:0;
width:100%;
height:100%;
z-index:2;
}
.mynav
{
position:absolute;
z-index:2;
top:80px;
}
.navbar
{
padding:15px;
}
.navbar-nav .nav-item a
{
color:#fff;
font-size:14px;
font-weight:500;
text-transform:uppercase;
}
.navbar-nav .dropdown .dropdown-menu, .navbar-nav .dropdown .dropdown-menu a
{
margin:0px;
padding:0px;
color:#000;
}
.navbar-nav .dropdown .dropdown-menu a
{
padding:5px 10px;
font-size:13px;
border-bottom:1px solid #f2f2f2;
}
.top_nav
{
width:100%;
position:absolute;
top:45px;
height:40px;
line-height:40px;
color:#fff;
font-size:14px;
z-index:2;
}
.mybt
{
margin-left:20px;
font-size:12px;
height:40px;
font-size:15px;
width:120px;
text-align:center;
display:block;
line-height:40px;
background:#f2a500;
color:#000;
border-radius:5px;
transition:all ease-in-out 0.1s;
}
.mybt a
{
color:#000;
transition:all ease-in-out 0.1s;
}
.mybt:hover, .mybt a:hover
{
background:#f6413e;
color:#fff;
text-decoration:none;
}
.donate
{
height:40px;
line-height:40px;
}
.donate ul
{
margin:0px;
padding:0px;
}
.donate ul li
{
display:inline-block;
padding:0px 5px;
line-height:25px;
height:25px;
}
.donate ul li a
{
color:#f6413e;
}
.donate ul li i
{
font-size:16px;
}
@media (max-width: 767px)
{
.mynav .navbar-toggler .navbar-toggler-icon { color:#fff; outline:0px;}
.navbg
{
background:none;
-webkit-box-shadow: 0px 0px 0px 0px rgba(128,128,128,1);
-moz-box-shadow: 0px 0px 0px 0px rgba(128,128,128,1);
box-shadow: 0px 0px 0px 0px rgba(128,128,128,1);
}
.mynav img
{
width:20%;
}
.navbar-collapse
{
border-radius:5px;
background-color:rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
.navbar-nav .nav-item
{
padding:0px 10px;
border-bottom:1px solid #565963;
}
.navbar-nav .nav-item:last-child
{
border:none;
}
.top_nav
{
text-align:center;
}
.donate
{
display:none;
}
.mybt
{
font-size:12px;
height:40px;
font-size:12px;
width:100px;
text-align:center;
display:block;
line-height:40px;
background:#f2a500;
color:#fff;
transition:all ease-in-out 0.1s;
}
.mybt a
{
color:#fff;
transition:all ease-in-out 0.1s;
}
.mybt:hover, .mybt a:hover
{
background:#f6413e;
color:#fff;
text-decoration:none;
}
}
