Responsive Header with Hero section

In this blog, we are going to learn how to create a responsive website header with a hero section using HTML, CSS, and a little bit of jquery for responsive navigation. when a visitor visits a website the first thing that they see on any website is the header and hero section. This is the top section of any website and visitors will have their first impression of your website and your business. So it's important to have a nicely designed homepage for your website. I will ask you to follow the video tutorial to see how the snippet was made step by step. Then go to the bottom of the page to collect the code. If you like the content please subscribe to our YouTube Channel.

I hope you have seen the video. There is no right way to build a website header. Different websites create that in different ways. Normally they contain a few things like logos, a navigation bar, social media icons, a search bar, links, etc. Some people include a hero section as a part of the header but they are not quite the same thing. A hero section is basically the top section of the content for a website. It takes up the full width of the page or the height of the screen. The hero section might have a color or image background. In this snippet, we have created a website header that contains a text logo to the left and a navigation part to right. It also has a hero section that contains a background image, a heading, text, and call-to-action buttons.

We have made the navigation menu responsive for mobile devices. A hamburger icon will appear in place of the menu on small screens. To open the main menu click the hamburger icon. It will bring up our main menu with a slide animation from the right. This will a be full-screen navigation menu. The Nav items in the navigation menu will be displayed vertically instead of horizontally. Clicking on the cross icon above will return the menu to its previous position.

You May Also like:

Responsive Website Header with Hero section [ Source Code ]:

Watch the video above before collecting the code directly. This will make your code easier to understand. Anyway, first create an HTML file then a CSS file, and link the external CSS file to the HTML. Then add the latest jQuery file. Copy the code from the code box below and paste it into your project. If for some reason your code is not working then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>How to create a responsive website header</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <h5>Creativo</h5>
            </div>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="bar">
                <div class="bar-1"></div>
                <div class="bar-2"></div>
                <div class="bar-3"></div>
            </div>
        </nav>
    </header>
    
    <div class="banner">
        <div class="wrapper">
            <div class="content">
                <h2>Digital Agency</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, aliquam iure? Hic quisquam provident aut!</p>
                <div class="btn">
                    <a href="#">Learn More</a>
                    <a href="#">Sign up</a>
                </div>                  
            </div>
        </div>
    </div>
    
    
    <script>
        const X = () => {
            const menu = document.querySelector('.bar');
            const nav = document.querySelector('.menu');
            
            menu.addEventListener('click', () => {
               menu.classList.toggle('bar-active');
                nav.classList.toggle('nav-active');
            });
        }
        X();
    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
nav {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 10vh;
	background: #ef0554;
}
.logo {
	color: #fff;
	text-transform: capitalize;
	font-size: 24px;
	cursor: pointer;
	font-weight: 900;
	letter-spacing: 1px;
}
.logo span {
	color: deepskyblue;
}
.menu {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
	width: 30%;
}
.menu li {
	list-style: none;
}
.menu a {
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	padding: 30px;
	font-weight: 600;
	transition: .9s;
}
.menu a:hover {
	letter-spacing: 2px;
}
.bar {
	display: none;
	cursor: pointer;
}
.bar div {
	width: 25px;
	height: 3px;
	background-color: #fff;
	margin: 5px;
	transition: all .5s ease;
}
@media screen and (max-width:1024px) {
	.menu {
		width: 60%;
	}
}
@media screen and (max-width:768px) {
	body {
		overflow-x: hidden;
	}
	.menu {
		position: absolute;
		right: -100%;
		height: 90vh;
		top: 10vh;
		background-color: #000;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		transform: translateX(100%);
		transition: transform 0.5s ease-in-out;
	}
	.bar {
		display: block;
	}
}
.nav-active {
	transform: translateX(-100%);
}
.bar-active .bar-1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}
.bar-active .bar-2 {
	opacity: 0;
}
.bar-active .bar-3 {
	transform: rotate(45deg) translate(-5px, -6px);
}
.banner {
	background-image: url(3.jpg);
	height: 100vh;
	background-size: cover;
	background-position: center;
}
.content h2 {
	font-family: alfa slab one;
	color: #ef0554;
	font-size: 60px;
}
.content p {
	width: 50%;
	color: rgba(0, 0, 0, 0.6);
	line-height: 2;
}
.btn a {
	text-decoration: none;
	background: #ef0554;
	padding: 15px 10px;
	display: inline-block;
	color: #fff;
	margin-top: 15px;
	border-radius: 50px;
	width: 130px;
	text-align: center;
}
.wrapper {
	width: 1060px;
	margin: auto;
	padding-top: 12%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.wrapper {
		width: 75%;
		padding-top: 26%;
	}
	.content {
		text-align: center;
	}
	.content h2 {
		font-size: 60px;
	}
	.content p {
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.banner {
		background-position: 60%;
	}
	.wrapper {
		width: 75%;
		padding-top: 26%;
	}
	.content h2 {
		font-size: 25px;
	}
	.content p {
		width: 100%;
	}
	.btn a {
		padding: 9px 4px;
		width: 105px;
	}
}

Hope the code is displaying correctly in your browser. There are many more such snippets on our website which you can see by clicking on the Load More button at the bottom of the homepage. If you are a beginner then these small projects can be useful for you. Please share the content of this website with like-minded people. Thank you very much for visiting our website.

DOWNLOAD CODE

Responsive Website Header with Hero section [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Header with Hero section

Responsive Website Header with Hero section [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form