Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap Navbar Not Staying Sticky Across All Sections

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head section -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jessica Kowalski</title>
    
    <!-- Font Awesome CDN for social icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Arial', sans-serif;
            background-color: #0D0D0D;
            color: #EDEDED;
            overflow: visible;
        }

        .container {
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top: 20px;
        }

        /* Dark overlay */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://images.pexels.com/photos/1242348/pexels-photo-1242348.jpeg?auto=compress&cs=tinysrgb&w=1200');
            background-size: cover;
            opacity: 0.5;
        }

        .content {
            position: relative;
            text-align: center;
            max-width: 600px;
            margin: auto;
        }

        /* Header Section with Fixed Height */
        #header-section {
            height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(45deg, #0F0F0F, #444444);
        }

        #header-section h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            color: #E0E0E0;
        }

        #header-section h2 {
            font-size: 1.5rem;
            color: #AAAAAA;
            margin-bottom: 20px;
        }

        #header-section .social-icons a {
            font-size: 1.8rem;
            color: #EDEDED;
            transition: color 0.3s ease;
        }

        #header-section .social-icons a:hover {
            color: #00E676;
        }

        /* Blog section styling */
        .blog-section {
            padding: 50px 0;
            background-color: #1B1B1B;
        }

        .blog-section h2 {
            text-align: center;
            font-size: 3em;
            color: #00E676;
            margin-bottom: 30px;
            font-weight: 700;
        }

        .card-title {
            color: #00E676;
        }

        .card {
            background-color: #333;
            color: #EDEDED;
            margin-bottom: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
        }

        .card:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        /* Remove global img styles to prevent conflicts */
        /* img {
            width: 100%;
            height: 250px; 
            object-fit: cover; 
        } */

        /* Apply styles specifically to card images */
        .card-img-top {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

        /* Gallery section */
        .gallery-section {
            padding: 50px 0;
            background-color: #2A2A2A;
        }

        .gallery-section h2 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
            font-weight: 700;
            color: #EDEDED;
        }

        .card-body {
            background-color: #3A3A3A;
            color: #FFFFFF;
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #00E676;
        }

        /* Contact section styling */
        .contact-section {
            padding: 50px 0;
            background-color: #1B1B1B;
            color: #FFFFFF;
        }

        .contact-section h2 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 30px;
            color: #EDEDED;
        }

        .form-control {
            background-color: #444;
            color: white;
            border: none;
            border-radius: 0.25rem;
        }

        .form-control:focus {
            background-color: #444;
            color: white;
            border-color: #00E676;
        }

        .form-control::placeholder {
            color: #BBB;
        }

        .btn-primary {
            background-color: #00E676;
            border: none;
        }

        .btn-primary:hover {
            background-color: #00C569;
        }

        /* Google Maps section styling */
        .google-map {
            width: 100%;
            height: 400px;
            border: 0;
        }

    </style>
</head>
<body>
    <!-- Sticky Navbar -->
<!-- Sticky Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Highlights</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


    <!-- Header Section with Fixed Height -->
    <div class="container" id="header-section">
        <div class="overlay"></div>
        <div class="content">
            <h1>Jessica Kowalski</h1>
            <h2>Photographer & Blogger</h2>
            <div class="social-icons">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </div>

    <!-- Highlights Section -->
    <section class="highlights-section">
        <div class="container">
            <h2>Highlights</h2>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                <div class="col">
                    <div class="card shadow-sm">
                        <img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d" class="card-img-top" alt="Beautiful Sunset">
                        <div class="card-body">
                            <h5 class="card-title">Beautiful Sunset</h5>
                            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#highlight1" aria-expanded="false" aria-controls="highlight1">
                                More Info
                            </button>
                            <div class="collapse" id="highlight1">
                                <div class="card card-body">
                                    This is a beautiful sunset captured during an evening hike. The colors were mesmerizing, blending hues of orange, red, and purple.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card shadow-sm">
                        <img src="https://images.unsplash.com/photo-1493558103817-58b2924bce98" class="card-img-top" alt="City Skyline">
                        <div class="card-body">
                            <h5 class="card-title">City Skyline</h5>
                            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#highlight2" aria-expanded="false" aria-controls="highlight2">
                                More Info
                            </button>
                            <div class="collapse" id="highlight2">
                                <div class="card card-body">
                                    A stunning view of the city skyline just after sunset. The lights of the city contrast beautifully with the night sky.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card shadow-sm">
                        <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0" class="card-img-top" alt="Mountain Landscape">
                        <div class="card-body">
                            <h5 class="card-title">Mountain Landscape</h5>
                            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#highlight3" aria-expanded="false" aria-controls="highlight3">
                                More Info
                            </button>
                            <div class="collapse" id="highlight3">
                                <div class="card card-body">
                                    This is a serene mountain landscape showcasing the natural beauty of towering peaks and lush green valleys.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section class="blog-section">
        <div class="container">
            <h2>Latest Blogs</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="card bg-dark text-white">
                        <img src="https://images.unsplash.com/photo-1525609004556-c46c7d6cf023" class="card-img-top" alt="Landscape Photography">
                        <div class="card-body">
                            <h5 class="card-title">Exploring Nature Photography</h5>
                            <p class="card-text">Discover the beauty of landscapes through tips on framing, light usage, and more in this detailed guide.</p>
                            <a href="#" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-dark text-white">
                        <img src="https://images.unsplash.com/photo-1481277542470-605612bd2d61" class="card-img-top" alt="Travel Photography">
                        <div class="card-body">
                            <h5 class="card-title">Travel Photography Essentials</h5>
                            <p class="card-text">Pack your gear and hit the road! A comprehensive guide on capturing vibrant travel photos.</p>
                            <a href="#" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-dark text-white">
                        <img src="https://images.unsplash.com/photo-1502920917128-1aa500764b36" class="card-img-top" alt="Portrait Photography">
                        <div class="card-body">
                            <h5 class="card-title">Mastering Portraits</h5>
                            <p class="card-text">Learn how to take stunning portraits with proper lighting, posing, and camera settings.</p>
                            <a href="#" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="gallery-section">
        <div class="container">
            <h2>Gallery</h2>
            <!-- LightWidget WIDGET --><!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
            </div>
    </section>

    <!-- Contact Section -->
    <section class="contact-section">
        <div class="container">
            <h2>Contact</h2>
            <div class="row">
                <!-- Contact Form -->
                <div class="col-12 col-md-6 contact-form">
                    <form>
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" placeholder="Your Name">
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="email" placeholder="[email protected]">
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" id="phone" placeholder="Your Phone Number">
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Message</label>
                            <textarea class="form-control" id="message" rows="3" placeholder="Your message"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>

                <!-- Google Maps -->
                <div class="col-12 col-md-6 map-section">
                    <iframe class="google-map"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.086775191515!2d144.95565161566554!3d-37.8172099797517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf57723d4d7bc5a14!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1631877472276!5m2!1sen!2sau"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Include the LightWidget JavaScript to adjust iframe height -->
    <script src="//cdn.lightwidget.com/widgets/lightwidget.js"></script>
</body>
</html>

I’m using Bootstrap to build a website, and I want the navbar to remain sticky at the top of the page. The sticky functionality works correctly when I’m in the #header-section, but when I scroll past it to other sections, the navbar disappears.

Here’s a simplified version of my code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <!-- Navbar content -->
</nav>

<!-- Header Section -->
<div class="container" id="header-section">
    <!-- Content -->
</div>

<!-- Other sections -->
<section class="highlights-section">
    <!-- Content -->
</section>
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#header-section {
    height: 60vh;
    /* Other styling */
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

Things I’ve tried:

  • Increased z-index for the navbar.

  • Decreased z-index for other sections.

Tags:

3

Answers


  1. 0

    Workaround: If you replace the .sticky-top class with .fixed-top it would fix the navbar to the top consistently. However in that case you would need to add some padding to the body in order to push the content below the navbar.

    body {
    padding-top: 56px;
}
    Login or Signup to reply.
  2. 0

    I added fixed-top-navbar class and updated #header-section. It works as you want now.

    <!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head section -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jessica Kowalski</title>
    
    <!-- Font Awesome CDN for social icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Arial', sans-serif;
            background-color: #0D0D0D;
            color: #EDEDED;
            overflow: visible;
        }

        .container {
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top: 20px;
        }

        /* Dark overlay */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://images.pexels.com/photos/1242348/pexels-photo-1242348.jpeg?auto=compress&cs=tinysrgb&w=1200');
            background-size: cover;
            opacity: 0.5;
        }

        .content {
            position: relative;
            text-align: center;
            max-width: 600px;
            margin: auto;
        }

        /* Header Section with Fixed Height */
        #header-section {
            height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: linear-gradient(45deg, #0F0F0F, #444444);
            margin-top: 56px !important;
        }

        #header-section h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            color: #E0E0E0;
        }

        #header-section h2 {
            font-size: 1.5rem;
            color: #AAAAAA;
            margin-bottom: 20px;
        }

        #header-section .social-icons a {
            font-size: 1.8rem;
            color: #EDEDED;
            transition: color 0.3s ease;
        }

        #header-section .social-icons a:hover {
            color: #00E676;
        }

        /* Blog section styling */
        .blog-section {
            padding: 50px 0;
            background-color: #1B1B1B;
        }

        .blog-section h2 {
            text-align: center;
            font-size: 3em;
            color: #00E676;
            margin-bottom: 30px;
            font-weight: 700;
        }

        .card-title {
            color: #00E676;
        }

        .card {
            background-color: #333;
            color: #EDEDED;
            margin-bottom: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
        }

        .card:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        /* Remove global img styles to prevent conflicts */
        /* img {
            width: 100%;
            height: 250px; 
            object-fit: cover; 
        } */

        /* Apply styles specifically to card images */
        .card-img-top {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

        /* Gallery section */
        .gallery-section {
            padding: 50px 0;
            background-color: #2A2A2A;
        }

        .gallery-section h2 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 40px;
            font-weight: 700;
            color: #EDEDED;
        }

        .card-body {
            background-color: #3A3A3A;
            color: #FFFFFF;
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #00E676;
        }

        /* Contact section styling */
        .contact-section {
            padding: 50px 0;
            background-color: #1B1B1B;
            color: #FFFFFF;
        }

        .contact-section h2 {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 30px;
            color: #EDEDED;
        }

        .form-control {
            background-color: #444;
            color: white;
            border: none;
            border-radius: 0.25rem;
        }

        .form-control:focus {
            background-color: #444;
            color: white;
            border-color: #00E676;
        }

        .form-control::placeholder {
            color: #BBB;
        }

        .btn-primary {
            background-color: #00E676;
            border: none;
        }

        .btn-primary:hover {
            background-color: #00C569;
        }

        /* Google Maps section styling */
        .google-map {
            width: 100%;
            height: 400px;
            border: 0;
        }

        .fixed-top-navbar {
            width: 100% !important;
            position: fixed !important;
            top: 0;
        }
    </style>
</head>
<body>
    <!-- Sticky Navbar -->
<!-- Sticky Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top fixed-top-navbar">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Highlights</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>


    <!-- Header Section with Fixed Height -->
    <div class="container" id="header-section">
        <div class="overlay"></div>
        <div class="content">
            <h1>Jessica Kowalski</h1>
            <h2>Photographer & Blogger</h2>
            <div class="social-icons">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </div>

    <!-- Highlights Section -->
    <section class="highlights-section">
        <div class="container">
            <h2>Highlights</h2>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                <div class="col">
                    <div class="card shadow-sm">
                        <img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d" class="card-img-top" alt="Beautiful Sunset">
                        <div class="card-body">
                            <h5 class="card-title">Beautiful Sunset</h5>
                            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#highlight1" aria-expanded="false" aria-controls="highlight1">
                                More Info
                            </button>
                            <div class="collapse" id="highlight1">
                                <div class="card card-body">
                                    This is a beautiful sunset captured during an evening hike. The colors were mesmerizing, blending hues of orange, red, and purple.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card shadow-sm">
                        <img src="https://images.unsplash.com/photo-1493558103817-58b2924bce98" class="card-img-top" alt="City Skyline">
                        <div class="card-body">
                            <h5 class="card-title">City Skyline</h5>
                            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#highlight2" aria-expanded="false" aria-controls="highlight2">
                                More Info
                            </button>
                            <div class="collapse" id="highlight2">
                                <div class="card card-body">
                                    A stunning view of the city skyline just after sunset. The lights of the city contrast beautifully with the night sky.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col">
                    <div class="card shadow-sm">
                        <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0" class="card-img-top" alt="Mountain Landscape">
                        <div class="card-body">
                            <h5 class="card-title">Mountain Landscape</h5>
                            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#highlight3" aria-expanded="false" aria-controls="highlight3">
                                More Info
                            </button>
                            <div class="collapse" id="highlight3">
                                <div class="card card-body">
                                    This is a serene mountain landscape showcasing the natural beauty of towering peaks and lush green valleys.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section class="blog-section">
        <div class="container">
            <h2>Latest Blogs</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="card bg-dark text-white">
                        <img src="https://images.unsplash.com/photo-1525609004556-c46c7d6cf023" class="card-img-top" alt="Landscape Photography">
                        <div class="card-body">
                            <h5 class="card-title">Exploring Nature Photography</h5>
                            <p class="card-text">Discover the beauty of landscapes through tips on framing, light usage, and more in this detailed guide.</p>
                            <a href="#" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-dark text-white">
                        <img src="https://images.unsplash.com/photo-1481277542470-605612bd2d61" class="card-img-top" alt="Travel Photography">
                        <div class="card-body">
                            <h5 class="card-title">Travel Photography Essentials</h5>
                            <p class="card-text">Pack your gear and hit the road! A comprehensive guide on capturing vibrant travel photos.</p>
                            <a href="#" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card bg-dark text-white">
                        <img src="https://images.unsplash.com/photo-1502920917128-1aa500764b36" class="card-img-top" alt="Portrait Photography">
                        <div class="card-body">
                            <h5 class="card-title">Mastering Portraits</h5>
                            <p class="card-text">Learn how to take stunning portraits with proper lighting, posing, and camera settings.</p>
                            <a href="#" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="gallery-section">
        <div class="container">
            <h2>Gallery</h2>
            <!-- LightWidget WIDGET --><!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
            </div>
    </section>

    <!-- Contact Section -->
    <section class="contact-section">
        <div class="container">
            <h2>Contact</h2>
            <div class="row">
                <!-- Contact Form -->
                <div class="col-12 col-md-6 contact-form">
                    <form>
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" placeholder="Your Name">
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="email" placeholder="[email protected]">
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">Phone Number</label>
                            <input type="tel" class="form-control" id="phone" placeholder="Your Phone Number">
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Message</label>
                            <textarea class="form-control" id="message" rows="3" placeholder="Your message"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>

                <!-- Google Maps -->
                <div class="col-12 col-md-6 map-section">
                    <iframe class="google-map"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.086775191515!2d144.95565161566554!3d-37.8172099797517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf57723d4d7bc5a14!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1631877472276!5m2!1sen!2sau"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Include the LightWidget JavaScript to adjust iframe height -->
    <script src="//cdn.lightwidget.com/widgets/lightwidget.js"></script>
</body>
</html>
    Login or Signup to reply.
  3. 0

    The Actual Problem

    The custom css added to the page breaks Bootstrap default styling.

    To fix the problem with sticky-top, remove height: 100%; from the body:

    body,
html {
  margin: 0;
  padding: 0;

  height: 100%;  /* <-- REMOVE THIS RULE */

  font-family: 'Arial', sans-serif;
  background-color: #0D0D0D;
  color: #EDEDED;
  overflow: visible;
}

    Custom css should be used sparingly with Bootstrap. Often times there are built-in Bootstrap classes and variables that can achieve the same effect, but without conflicts.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search