A Sticky Header Above the Hero Image
Here's an example of a sticky header above a hero image using Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
/* Custom CSS for the sticky header */
.sticky-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100;
transition: all 0.3s ease-in-out;
}
.sticky-header .navbar-brand {
font-weight: bold;
color: #333;
}
.hero-image {
background-image: url('silansoftware.png');
background-size: cover;
margin-top:50px;
height: 500px;
width: auto;
}
</style>
<title>Sticky Header Above Hero Image</title>
</head>
<body>
<!-- Sticky Header -->
<header class="sticky-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Hero Image -->
<section class="hero-image"></section>
<!-- Content -->
<div class="container mt-5">
<h1>Welcome to My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, urna nec finibus porttitor, dolor justo molestie odio, id varius sapien libero sed lectus. Integer congue risus sit amet odio tincidunt, eu venenatis nunc efficitur.</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
// JavaScript to toggle the sticky header class
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
$('.sticky-header').addClass('sticky');
} else {
$('.sticky-header').removeClass('sticky');
}
});
</script>
</body>
</html>In this example, we have a sticky header above a hero image using Bootstrap. The header has a light background and is positioned using custom CSS. The header becomes sticky when the user scrolls down the page. The hero image is set using a CSS class called `hero-image`, and you can replace the `url('hero-image.jpg')` with the actual path to your hero image.
The content below the hero image is placed inside a `container` and includes a heading and some text for demonstration purposes.
Output:
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.