Skip to content Skip to blog sidebar
  • Contacts
  • Privacy Policy
  • Disclaimer
Schauhan.in |

Schauhan.in |

Technology Updates




  • DESIGNING
    • HTML
    • CSS
  • Bootstrap Examples
    • All Bootstrap Example
    • Bootstrap 3 Tutorials
    • Bootstrap 4 Tutorials
    • Bootstrap Header Templates
    • Bootstrap Footer Templates
    • Bootstrap Login Templates
    • Bootstrap Form Examples
    • Bootstrap Pricing Tables
  • Javascript
  • Website Designing
  • Portfolio
    • Logo Portfolio
    • Website Portfolio
  • Flyer’s Download
    • Night Club Flyer Free Download
    • Festival Flyer
    • Corporate Flyer
    • Digital Marketing Flyer
Home » Bootstrap » How to Create Bootstrap 4 Responsive Header Free Download

How to Create Bootstrap 4 Responsive Header Free Download

Posted on: October 23, 2019 | By: sandeepchhn – 1 Comment
bootstrap header with logo
bootstrap sticky header
Bootstrap Responsive Header

Today in this article we will learn how to create Responsive Bootstrap Header with source code.

HTML

<nav id="navbar" class="navbar navbar-expand-lg myheader" >
 <div class="container">
 
     <a class="navbar-brand" href="#"><img src="logo.jpg" /></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
  
</nav>

CSS

.myheader
{
	background:#fff;
	-webkit-box-shadow: 0px 9px 5px 0px rgba(227,227,227,1);
-moz-box-shadow: 0px 9px 5px 0px rgba(227,227,227,1);
box-shadow: 0px 9px 5px 0px rgba(227,227,227,1);
}

.navbar-brand
{
	width:70%;
}

.mymenu
{
	text-align:right;
}

@media screen and (max-width: 600px) {

.navbar-toggler .navbar-toggler-icon
{
	color:#fff;
	background:#333;
	outline:0px;
}

.navbar-brand
{
	width:40%;
}

.navbar-nav .nav-item
{
	border-bottom:1px solid #f2f2f2;
	line-height:15px;
	font-size:14px;
}

}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
Download Source Code
Filed Under: Filed Under:Bootstrap, Bootstrap Examples, Bootstrap Header, General
Tagged With: Tagged With:Bootstrap Header Design and Examples, bootstrap header with logo

Post navigation

« Download Bootstrap Admin Panel
Bootstrap Carousel Examples Free Download »
Avatar for sandeepchhn

About The Author

sandeepchhn
Hello Friend, My Name is Sandeep Chauhan, I am the owner of SCHAUHAN.IN. I Have Passed B.Sc(IT) from Shobhit Univercity Uttar Pradesh, and i have the Diploma of Arena Animation, I Leave in Varanasi Uttar Pradesh.

Related Articles

How to Open Bootstrap Dropdown Menu on Hover

How to Open Bootstrap Dropdown Menu on Hover

Happy Diwali Flyer PSD free download

Happy Diwali Flyer PSD free download

How to Add Whatsapp Chat Button to your Website

How to Add Whatsapp Chat Button to your Website

One Reply to “How to Create Bootstrap 4 Responsive Header Free Download”

  1. Pingback: 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,

Comments are closed.

Ajab Gajab News

  • How To Make Beautiful Responsive Login Page

    How To Make Beautiful Responsive Login Page

  • Product Page Using HTML and CSS

    Product Page Using HTML and CSS

  • Bootstrap Form Examples and Tutorials

    Bootstrap Form Examples and Tutorials

  • Bootstrap Registration form Template free download

    Bootstrap Registration form Template free download

  • Product Carousel bootstrap Free Download

    Product Carousel bootstrap Free Download

  • Bootstrap Mobile Admin Panel Free Download

    Bootstrap Mobile Admin Panel Free Download

  • Admin Panel Template using Bootstrap Free Download

    Admin Panel Template using Bootstrap Free Download

  • Bootstrap pricing table template Free Download

    Bootstrap pricing table template Free Download

  • Bootstrap Carousel Examples Free Download

    Bootstrap Carousel Examples Free Download

  • Bootstrap carousel with thumbnails slider Example Free Download

    Bootstrap carousel with thumbnails slider Example Free Download

  • Bootstrap Modal Plugin

    Bootstrap Modal Plugin

  • Responsive Login Page Free Download

    Responsive Login Page Free Download

  • Bootstrap-Navbar Tutorials and Examples

    Bootstrap-Navbar Tutorials and Examples

Logo Designing In Varanasi
3D Logo Designing in Varanasi
Website Designing in Varanasi
Dynamic Website Development in Varanasi
Wordpress Website Designing in Varanasi
Cheap Website Designing in Varanasi
Cheap 3D Logo Designing in Varanasi
E-commerce Website Designing in Varanasi
Shopping Website Designing in Varanasi
Cheap Wordpress Website Designing



© 2023 Schauhan.in |. All Rights Reserved.  
  • Disclaimer
  • Privacy Policy