Do you want to quickly build a clean CSS Responsive Header with Logo and Menu? Today, we have a lightweight plugin that we will use to create the top header area with the dropdown menu.
It is base on jQuery and CSS plugin which is easy to customize and simple to use. The navigation bar comes with a black background whether the logo aligns on the left side and the menu links are on the right side.
It also has social media icons on the right side of navigation links which create using SVG but you can change them into FontFace or image.
How to Make CSS Responsive Header with Logo & Menu
To start creating the navigation and header on your website. You need to add the following two files. If you already have jQuery and reset.css file then you don’t need to load them.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Reset CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
Next, you need to include stylesheet and Jquery for creating a responsive header menu and for this you need to load the following files in the header.
<!-- Responsive Header CSS --> <link rel="stylesheet" href="css/style.css"> <!-- Responsive Header Js --> <script src="js/index.js"></script>
Finally, we need to create HTML structure for responsive header, navigation links, logo and social media icons as follows.
<header class="header clearfix">
<div class="clearfix display-flex align-items contentHolder" data-items="center">
<div class="logo"><a href=""><img src="https://placehold.it/230x60/" alt="logo Placeholder"></a></div>
<nav class="menu">
<ol>
<li class="mainMenu"><a href="">Menu 1</a></li>
<li class="mainMenu"><a href="">Menu 2</a>
<ul class="submenu">
<li class="subOption"><a href="">SubMenu 1</a></li>
<li class="subOption"><a href="">SubMenu 2</a></li>
<li class="subOption"><a href="">SubMenu 3</a></li>
</ul>
</li>
<li class="mainMenu mobileSub"><a href="">SubMenu 1</a></li>
<li class="mainMenu mobileSub"><a href="">SubMenu 2</a></li>
<li class="mainMenu mobileSub"><a href="">SubMenu 3</a></li>
<li class="mainMenu"><a href="">Menu 3</a></li>
<li class="mainMenu"><a href="">Menu 4</a></li>
<li class="mainMenu"><a href="">Menu 5</a></li>
</ol>
<div class="hamburger"><span></span></div>
<div class="dimmer"></div>
</nav>
</div>
</header>That’s It. You are ready to take a look at the demo and start implementing on your site. You can easily customize its background color and change the font from the style.css.