
In this tutorial, we will guide you step by step through creating a hero section with an overlay menu. We’ll discuss the basic HTML and CSS structure, then dive into elements like the header (hero top), image carousel, hero text, and building the overlay menu. Finally, we’ll add JavaScript to enable interactive features.

Step 1: Basic HTML Structure for Hero and Overlay Menu
HTML Structure for the Hero Section
We’ll start by creating the basic structure of the hero section. This section will include:
- Hero Top: Contains the logo, phone number, booking button, and icons to open and close the overlay menu.
- Image Carousel: A series of images that will automatically scroll in the background.
- Hero Text: The main slogan and “Read More” button.
<section class="sf-hotel-hero">
<div class="hero-top">
<!-- Logo, phone number, booking button, menu icons -->
</div>
<div class="hero-content">
<!-- Image carousel -->
</div>
<div class="hero-banner">
<!-- Hero text -->
</div>
</section>
.sf-hotel-hero {
position: relative;
width: 100%;
height: 100vh;
font-size: 1rem;
line-height: 1.2;
color: #fff;
}
.sf-hotel-hero .hero-content {
height: 100vh;
width: 100%;
}
.sf-hotel-hero a {
color: #f5de9c;
}
.sf-hotel-hero a:hover {
color: #fae3a5;
}
HTML Structure for the Overlay Menu
The overlay menu consists of two main parts:
- Left Side: Contains the navigation links to different sections of the website.
- Right Side: Contains additional links and information, such as the hotel address, email, phone number, and social media links.
<div class="sf-menu-overlay">
<div class="overlay-content">
<div class="overlay-navigation">
<!-- Navigation -->
</div>
<div class="overlay-addons">
<!-- Additional links and information -->
</div>
</div>
</div>
.sf-menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 100%;
background-color: #313131;
background-image: url(images/pattern.png);
font-size: 1rem;
line-height: 1.5;
z-index: 999;
overflow-y: auto;
}
.sf-menu-overlay a {
color: #f5de9c;
text-decoration: none;
}
.sf-menu-overlay a:hover {
text-decoration: underline;
}
.sf-menu-overlay .overlay-content {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 100%;
height: 100%;
color: #fff;
padding: 50px;
}
Step 2: Building Elements of the Hero Section
Hero Top
Now we will go through the detailed process of building the header (hero top) of the hero section.
- Logo,
- Phone Number,
- Booking Button,
- Menu Links
<div class="hero-top">
<a href="#" class="hero-logo">
<img src="images/snippflow.svg" alt="Logo" />
</a>
<div class="hero-actions">
<p class="phone-number">+00 123 456 789</p>
<a href="#" class="booking-button">
<i class="fa-solid fa-bell-concierge"></i>
<span>Book now</span>
</a>
<div class="menu-icons">
<a href="#" class="menu-icon open-menu">
<i class="fa-solid fa-bars"></i>
</a>
<a href="#" class="menu-icon close-menu">
<i class="fa-solid fa-xmark"></i>
</a>
</div>
</div>
</div>
.sf-hotel-hero .hero-top {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 1000;
padding: 20px 30px;
}
.sf-hotel-hero .hero-top a.hero-logo {
display: block;
line-height: 0;
}
.sf-hotel-hero .hero-top a.hero-logo img {
width: 140px;
height: auto;
}
.sf-hotel-hero .hero-top .hero-actions {
display: flex;
align-items: center;
gap: 20px;
padding: 10px 20px;
border-radius: 30px;
}
.sf-hotel-hero .hero-top a.booking-button {
display: inline-flex;
gap: 10px;
align-items: center;
padding: 10px 20px;
color: #fff;
font-weight: 700;
border: 1px solid #fff;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.sf-hotel-hero .hero-top a.booking-button:hover {
background-color: #fff;
border: 1px solid #fff;
color: #000;
}
.sf-hotel-hero .hero-top .menu-icons {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
}
.sf-hotel-hero .hero-top .menu-icons a {
font-size: 24px;
display: none;
}
.sf-hotel-hero .hero-top .menu-icons a.open-menu {
display: block;
}
Image Carousel
Next, we’ll add an image carousel that will display in the background.
<div class="hero-content">
<div class="slick-slider">
<div class="item">
<img src="images/pexels-pixabay-258154.jpg" alt="">
</div>
<div class="item">
<img src="images/pexels-elina-sazonova-1838554.jpg" alt="" />
</div>
<div class="item">
<img src="images/pexels-ludvighedenborg-3578007.jpg" alt="" />
</div>
</div>
</div>
.sf-hotel-hero .hero-content .slick-slider,
.sf-hotel-hero .hero-content .slick-slider .item {
width: 100%;
height: 100vh;
overflow: hidden;
}
.sf-hotel-hero .hero-content .slick-slider img {
width: 100%;
height: 100vh;
object-fit: cover;
}
Hero Text
We will add hero text that will be displayed over the image carousel, including the main slogan.
<div class="hero-banner">
<div class="banner-wrapper">
<p>Your Comfort, Our Passion</p>
<h1>Where Luxury<br /> Meets Comfort</h1>
<a class="read-more" href="#"><i class="fa-solid fa-arrow-down"></i></a>
</div>
</div>
.sf-hotel-hero .hero-content .hero-banner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
position: absolute;
left: 0;
top: 0;
}
.sf-hotel-hero .hero-content .banner-wrapper {
text-align: center;
}
.sf-hotel-hero .hero-content .banner-wrapper > *:not(:last-child) {
margin-bottom: 30px;
}
.sf-hotel-hero .hero-content .banner-wrapper h1 {
font-size: clamp(2.5rem,5vw, 6rem);
line-height: 1;
font-weight: 900;
}
.sf-hotel-hero .hero-content .banner-wrapper p {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4vw;
}
.sf-hotel-hero .hero-content .banner-wrapper a.read-more {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 100%;
font-size: 20px;
background-color: #ffd763;
color: #000;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.sf-hotel-hero .hero-content .banner-wrapper a.read-more:hover {
transform: scale(1.1);
}
Responsive
To ensure that the hero section is accessible and visually appealing on all devices, we employed CSS media queries to adjust the layout and styling based on screen size
@media only screen and (max-width: 767px) {
.sf-hotel-hero .hero-top { padding: 10px 10px 10px 20px; }
.sf-hotel-hero .hero-top a.hero-logo img { width: 120px; }
.sf-hotel-hero .hero-top .hero-actions { padding: 7px 15px; gap: 10px; }
.sf-hotel-hero .hero-top a.booking-button { padding: 10px 12px; }
.sf-hotel-hero .hero-top a.booking-button span { display: none; }
.sf-hotel-hero .hero-top .phone-number { display: none; }
}
Sticky header
A sticky header enhances navigation by keeping essential elements, such as the header itself, visible at the top of the screen as the user scrolls through the page. This feature ensures that important navigation controls are always within easy reach, providing a consistent user experience.
.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-top {
justify-content: flex-end;
}
.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-logo {
display: none;
}
.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-actions {
background-color: rgba(0,0,0,.85);
}
.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-actions .booking-button {
border: 1px solid rgba(255,255,255,.3);
}
Step 3: Building the Overlay Menu
Left Side Navigation
First, we’ll build the left side of the overlay menu, which contains navigation links to different sections of the website.
<div class="overlay-navigation">
<nav class="menu-links">
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Hotel</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">SPA & Wellness</a></li>
<li><a href="#">Restaurants</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
.sf-menu-overlay .overlay-navigation {
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 1200px;
}
.sf-menu-overlay .menu-links ul {
display: inline-flex;
flex-wrap: wrap;
list-style: none;
}
.sf-menu-overlay .menu-links li {
width: 50%;
margin: 0;
}
.sf-menu-overlay .menu-links a {
display: inline-block;
position: relative;
color: #fff;
font-size: max(1.2rem, 3vw);
text-decoration: none;
}
.sf-menu-overlay .menu-links a:after {
content: "";
position: absolute;
left: 0;
top: 100%;
width: 0%;
height: 1px;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
.sf-menu-overlay .menu-links a:hover:after {
width: 100%;
}
Right Side with Useful Links
Now, we’ll add the right side of the overlay menu, which contains the hotel address, email, phone number, and social media links.
<div class="overlay-addons">
<div class="address-box">
<address>The Grand Oasis Hotel<br />
123 Paradise Road,<br />
Palm Beach, FL 33480,<br />
United States
</address>
<a href="#">Show on map</a>
</div>
<p><a href="#">noreply@gmail.com</a><br />
+48 123 456 789
</p>
<nav class="social-links">
<ul>
<li><a href="#facebook"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
<li><a href="#instagram"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="#twitter"><i class="fa-brands fa-youtube"></i> YouTube</a></li>
</ul>
</nav>
</div>
.sf-menu-overlay .overlay-addons {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
}
.sf-menu-overlay .address-box address {
font-style: normal;
margin-bottom: 10px;
}
.sf-menu-overlay .social-links ul {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
}
.sf-menu-overlay .social-links a {
display: flex;
align-items: center;
gap: 10px;
}
Responsive
@media only screen and (max-width: 767px) {
.sf-menu-overlay { padding-top: 100px; }
.sf-menu-overlay .overlay-content { flex-direction: column; justify-content: flex-start; gap: 30px; padding: 25px; height: auto; }
.sf-menu-overlay .overlay-navigation { max-width: unset; width: 100%; }
.sf-menu-overlay .overlay-addons { width: 100%; }
.sf-menu-overlay .menu-links ul { gap: 10px; }
.sf-menu-overlay .menu-links li { width: 100%; }
}
Adding Interactivity with JavaScript
Finally, we’ll add JavaScript to enable the opening and closing of the overlay menu and the functioning of the image carousel.
Include Required Libraries
Add the following lines to your HTML file, preferably just before the closing </body>
tag, to include jQuery and Slick Slider:
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Slick Slider CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Include Slick Slider JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Add JavaScript for Interactivity
Now, include the JavaScript code to initialize the Slick Slider and manage the overlay menu:
Declare the Use of jQuery
The first step is to ensure that the $(document).ready()
function is set up correctly. This function ensures that the DOM is fully loaded before running any jQuery code.
$(document).ready(function() {
// All jQuery code will be placed inside this function
});
Initialize the Slick Slider
Within the $(document).ready()
function, you can now initialize the Slick Slider. This part of the code sets up the carousel, specifying options like the number of slides to show, autoplay settings, and responsiveness.
$(document).ready(function() {
// Initialize the Slick Slider
$(".slick-slider").slick({
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
responsive: [
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
// Menu functions will be added here
});
Define Functions to Open and Close the Overlay Menu
Finally, still within the $(document).ready()
function, add the code to handle the opening and closing of the overlay menu. This code toggles the visibility of the menu and switches between the open and close icons.
$(document).ready(function() {
// Initialize the Slick Slider
$(".slick-slider").slick({
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
responsive: [
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
// Function to toggle the menu
function toggleMenu(event, action) {
event.preventDefault();
if (action === 'open') {
$('.sf-menu-overlay').fadeIn();
$('body').addClass('menu-is-open');
$('.open-menu').hide();
$('.close-menu').show();
} else if (action === 'close') {
$('.sf-menu-overlay').fadeOut();
$('body').removeClass('menu-is-open');
$('.close-menu').hide();
$('.open-menu').show();
}
}
// Event listeners for opening and closing the menu
$('.open-menu').on('click', function(event) {
toggleMenu(event, 'open');
});
$('.close-menu').on('click', function(event) {
toggleMenu(event, 'close');
});
});
The functions for opening and closing the overlay menu are defined and linked to the appropriate button clicks.
Summary
In this tutorial, we explored how to create a sophisticated hero section with an overlay menu, ideal for luxury websites like hotels. We began by defining the basic HTML structure, splitting it into the hero top (with a logo, phone number, booking button, and menu icons), an image carousel, and the hero text. We then detailed the construction of the overlay menu, breaking it down into the left side navigation and the right side with additional links and information.
After setting up the structure, we applied CSS to style each component, giving the page a polished and modern appearance. Finally, we incorporated jQuery and the Slick Slider plugin to bring interactivity to the section—initializing the image carousel and implementing functions to open and close the overlay menu. This approach provided a comprehensive, step-by-step guide to building a functional and visually appealing hero section with an overlay menu.