hey everybody today we are going to learn how to make responsive header design in HTML and CSS from scratch. In today’s digital age, websites are viewed on various devices like smartphones, tablets, and desktops. To ensure a pleasant user experience, it’s crucial to design websites that adapt seamlessly to different screen sizes.
One essential element of web design is the header, which typically contains the navigation menu and branding. In this article, we’ll explore the concept of responsive header design using HTML and CSS, focusing on creating a user-friendly navigation experience for all users.
Responsive design is a web development approach that enables websites to adjust and adapt automatically based on the device’s screen size. A responsive header is one that resizes, rearranges, or hides certain elements to ensure readability and ease of navigation on all devices. With more people using mobile devices to browse the internet, responsive headers have become a necessity.
Responsive Header with Logo and Menu HTML and CSS
To create a responsive header, we start with the HTML structure. The header typically includes the website logo, navigation menu, and maybe some additional elements like a search bar or social media icons. By using semantic HTML tags like <header>, <nav>, and <div>, we can structure the header content in a meaningful way, making it easier for search engines and assistive technologies to understand the site’s layout.
<header>
<div class="container">
<nav>
<div class="logo">
<img src="img/logo.jpg" alt="" />
<h2><span>D</span>esignStudio</h2>
</div>
<ul>
<div class="btn">
<i class="fas fa-times close-btn"></i>
</div>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="btn">
<i class="fas fa-bars menu-btn"></i>
</div>
</nav>
</div>
</header>Here are header codes inside that have links which used to display the menus inside the navbar and also have a logo image that appears inside the navbar. once you have done that then you need to use CSS to design it.
CSS (Cascading Style Sheets) are used to style and design the HTML elements. Media queries in CSS allow us to define different styles based on the device’s screen size. By setting breakpoints at specific screen widths, we can apply different CSS rules to rearrange or hide elements in the header.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: url("../img/bg.jpg") no-repeat center center/cover;
min-height: 100vh;
font-family: "poppins", sans-serif;
position: relative;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
header {
background: rgba(49, 80, 208, 0.8);
padding: 0.5rem 0;
}
.container {
max-width: 1440px;
margin: 0 auto;
width: 100%;
padding: 0rem 1.5rem;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.logo img {
width: 30%;
object-fit: cover;
margin-right: 8px;
}
.logo span {
font-size: 2rem;
}
nav ul {
display: flex;
list-style-type: none;
}
nav ul li {
margin: 0rem 0.4rem;
align-items: center;
padding: 0.5rem 0.5rem;
}
nav ul li a {
text-decoration: none;
font-size: 1.1rem;
letter-spacing: 2.5px;
color: #fff;
padding: 0.7rem 1rem;
}
You’ve successfully designed the navbar, but I’m going to share it with you to display the content inside the showcase, here are the HTML codes.
<main>
<div class="container">
<div class="content">
<div class="txt">
<h4>The Best Tour Experience</h4>
<h2>This is a <span>Place Alive!</span></h2>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque
perspiciatis unde delectus eum vero architecto voluptatum dolore
laudantium, expedita, dolorem voluptatibus, alias laborum facere
quis ut inventore sint velit a!
</p>
<div class="form-input">
<form action="#">
<input type="text" placeholder="Search the location :)" />
</form>
<button type="button">Search</button>
</div>
</div>
</div>
</main>Once you’ve used above mentioned codes that use to display the content inside the showcase, but you need to use CSS to design that, let’s do that.
main {
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
color: #fff;
}
main h2 {
font-size: 4.1rem;
}
.txt h2 span {
background: #3150d0;
border-radius: 5px;
}
main h4 {
font-size: 2rem;
}
p {
font-size: 1rem;
line-height: 1.9;
margin: 1rem 0;
width: 50%;
}
.form-input {
margin: 1rem 0;
width: 50%;
position: relative;
}
.form-input input {
width: 100%;
outline: none;
padding: 1.4rem 1rem;
margin: 1rem 0rem;
border-radius: 04px;
border: none;
font-size: 1.2rem;
}
.form-input button {
position: absolute;
top: 25px;
right: 0;
padding: 0.8rem 1.5rem;
margin: 0 1rem;
outline: none;
border: none;
border-radius: 5px;
background: #3150d0;
color: #fff;
font-size: 1.3rem;
cursor: pointer;
}
.btn {
font-size: 1.3rem;
color: #fff;
cursor: pointer;
display: none;
}finally, we need to make it responsive, so we need to use a media query to display the content on small and medium screen sizes.
@media (max-width: 768px) {
main h2 {
font-size: 2rem;
}
p {
font-size: 0.9rem;
}
nav ul {
display: none;
}
.form-input input {
padding: 1rem 1rem;
margin: 0.8rem 0rem;
font-size: 1rem;
}
.form-input button {
position: absolute;
top: 16px;
right: 0;
padding: 0.8rem 1rem;
margin: 0 1rem;
font-size: 1rem;
cursor: pointer;
}
.btn {
display: block;
}
nav ul {
display: flex;
flex-direction: column;
position: fixed;
width: 300px;
height: 100vh;
background: #3150d0;
top: 80px;
left: -100%;
padding: 5rem 0;
transition: all 0.5s ease-in;
z-index: 10;
}
nav ul.display {
left: 0;
transition: all 0.5s ease-in-out;
}
ul li a {
display: block;
margin: 10px;
}
.close-btn {
position: absolute;
top: 0;
left: 15rem;
margin: 25px;
}
}
finally, you need to use a little bit of JavaScript to display and hide the menus when the user will click on the bar icons. So, let’s do that
const menus = document.querySelector("nav ul");
const menusBtn = document.querySelector(".menu-btn");
const closeBtn = document.querySelector(".close-btn");
menusBtn.addEventListener("click", function () {
menus.classList.add("display");
});
closeBtn.addEventListener("click", function () {
menus.classList.remove("display");
});
That’s it to create a responsive header design in HTML and CSS from scratch. If you face any problems with the codes, you can watch the video tutorial.
Responsive Header Design in HTML and CSS
Responsive header is designed in HTML and CSS from scratch practically, inside the video tutorial you will learn how to use HTML and CSS to design a header and showcase section as a responsive.
The navigation menu is a crucial part of the header, as it helps users find their way around the website. In a responsive header, we may need to change the layout of the menu to fit smaller screens. One common approach is to create a “hamburger” menu, where the menu items are hidden initially and can be revealed by clicking on an icon. This saves space and provides a clean look on smaller screens.
The website logo is an essential element for branding and recognition. In a responsive header, the logo should scale appropriately to fit different screen sizes. Using CSS, we can set the logo’s width and height to percentages or maximum values, ensuring it doesn’t overpower the header or get too small to be recognized.
You May Also Like:
- Animated Website using HTML CSS and JavaScript
- Responsive Footer Design Using HTML and CSS
- Responsive Landing Page Using HTML and CSS
- How to Make a Portfolio Website Using HTML and CSS
- Responsive Contact Us Page In HTML and CSS
Depending on the website’s design, there might be other elements like a search bar, social media icons, or a call-to-action button in the header. For responsive design, we need to consider how these elements will behave on smaller screens. It might be necessary to stack them vertically or hide them completely, only revealing them when the user interacts with certain features.
Once the responsive header design is implemented, thorough testing is crucial. We should check the website on various devices and screen sizes to ensure that all elements are displayed correctly, and the navigation is user-friendly. Cross-browser testing is also essential to guarantee a consistent experience for all users.
Conclusion:
In conclusion, a responsive header design in HTML and CSS is a vital aspect of modern web development. By using HTML and CSS techniques, we can create headers that adapt seamlessly to different devices, providing users with an optimal navigation experience. As more people access the internet on mobile devices, responsive design becomes a necessity for any website that aims to deliver a user-friendly experience to a diverse audience.
