Bootstrap navbar template free download

bootstrap 4 navbar template

Hello Friends today in this article we will learn how to create Bootstrap 4 Responsive Navbar With Right logo Free Download .

In View Demo you will see some ads but when you download source there you will not see ads, its ready to use in your website.

Step-1 Add Links Add These Files in Head Section .

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

Step-2 Add HTML

<div class="top-header">
   <div class="container">
      <div class="row">
      
      
         <div class="col-md-6 col-6 text-left">
            <ul class="top_nav">
              <li><i class="fa fa-phone"></i> +91-8299451759</li>
              <li><i class="fa fa-envelope"></i> info@schauhan.in</li>
            </ul>
         </div>
         
         
         <div class="col-md-6 col-6 text-right">
            <ul class="top_nav">
              <li><i class="fa fa-facebook"></i></li>
              <li><i class="fa fa-twitter"></i></li>
              <li><i class="fa fa-youtube"></i></li>
              <li><i class="fa fa-linkedin"></i></li>
            </ul>
         </div>
         
      </div>
   </div>
</div>


    <!-- Navigation -->
<nav class="navbar navbar-expand-md  static-top">
  <div class="container">
    <a class="navbar-brand" href="#">
          <img src="images/schauhan.in.jpg" alt="">
        </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"><i class="fa fa-navicon"></i></span>
        </button>
    <div class="collapse navbar-collapse" 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">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Step-3 Add CSS

.top-header
{
	background:#05050f;
	height:40px;
	line-height:40px;
}

.top_nav
{
	list-style:none;
}

.top_nav li
{
	color:#ccc;
	font-size:13px;
	display:inline-block;
}


.navbar-expand-md
{
	border-bottom:1px solid #f2f2f2;
}


.navbar-nav a
{
	color:#333;
}

@media only screen and (max-width: 600px) 
{
	.navbar-toggler-icon
	{
		color:#fff;
		background:#333;
		outline:none;
	}
	
	.navbar-nav 
	{
		background:#f9f9f9;
		padding:10px;
		border-radisu:5px;
	}
	
	.navbar-nav .nav-item
	{
		border-bottom:1px dashed #d9d9d9;
		line-height:20px;
		display:block;
			
	}
}


1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Tickets for Dubai expo 2020,Expo 2020 Dubai tickets price,dubai expo 2020 tickets,dubai world expo 2020,dubai 2020 expo dates, Dubai 2020, Dubai Expo 2020, dubai,dubai expo 2020 tickets price, dubai expo 2020 projects, expo dubai,dubai expo 2020 projects, Recent comment authors
  Subscribe  
newest oldest most voted
Notify of