Open In App

How to fix Bootstrap Navbar Always on Top ?

Last Updated : 10 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

As we have observed on many web pages the navbar is always present at the top of the page and when we scroll the page down it sticks to the top. The below approaches can be used to accomplish this task in Bootstrap.

Table of Content

Using fixed-top class

Bootstrap provides a fixed-top class that positions the navbar at the top of the web page. Follow the below steps to implement it practically.

  • Create a new HTML file named index.html.
  • Include a Bootstrap CDN link using the link tag.
  • Declare the navbar with its content and give it the fixed-top class.
  • Use some random text so that the page will become scrollable.
  • Create the footer and add the relevant classes to it so that bootstrap styles get applied.

Example: The below code will explain the use of the fixed-top class to fix the navbar at the top of the web page.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>
        Sticky Navbar with Bootstrap
    </title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 56px;
        }
    </style>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">
            Sticky Navbar
        </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">
                    <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>
    </nav>

    <!-- Main Content -->
    <div class="container mt-5">
        <h1>
            Welcome to GeeksforGeeks!
        </h1>
        <h2>
            About GeeksforGeeks
        </h2>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
    </script>
</body>

</html>

Output:

fosiGIF

Using sticky-top class

Another class that can be used to implement this task is sticky-tops. We will follow the steps given below to accomplish this.

  • Create a new HTML file named index.html.
  • Include a Bootstrap CDN link using the link tag.
  • Create the navbar with its content and given it the class sticky-top.
  • Use some random text so that the page will become scrollable.
  • Create the footer and add the relevant classes to it so that bootstrap styles get applied.

Example: The below code will explain the use of the sticky-top class to fix navbar at the top of the web page.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        Sticky Navbar with Bootstrap
    </title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <a class="navbar-brand" href="#">
            Sticky Navbar
        </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">
                    <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>
    </nav>

    <!-- Main Content -->
    <div class="container mt-5">
        <h1>
            Welcome to GeeksforGeeks!
        </h1>
        <h2>
            About GeeksforGeeks
        </h2>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that provides 
            computer science resources and coding challenges 
            for programmers and technology enthusiasts, along 
            with interview and exam preparations for upcoming 
            aspirants. With a strong emphasis on enhancing coding 
            skills and knowledge, it has become a trusted destination 
            for over 12 million plus registered users worldwide. The 
            platform offers a vast collection of tutorials, practice 
            problems, interview tutorials, articles, and courses, 
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top colleges & 
            organizations have the ability to guide you on a journey 
            from the humble beginnings of coding to the pinnacle of expertise. 
            Under their guidance watch your skills flourish as we lay the 
            foundation and help you conquer the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise, accessibility, 
            and community. We strive to empower individuals to enhance their 
            programming skills, to bridge the gap between academia and industry, 
            and provide a supportive community to the learners. GeeksforGeeks 
            is committed to promoting technological advancement and providing 
            opportunities for growth in the ever-evolving field of computer 
            science.
        </p>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src=
"https://code.jquery.com/jquery-3.5.1.slim.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
    </script>
</body>

</html>

Output:

fosiGIF



Like Article
Suggest improvement
Next
How to align two navbars in bootstrap ?
Share your thoughts in the comments

Similar Reads

How to fix Collapsing Navbar Collapse in Bootstrap ?
Bulma Navbar start and navbar end
Create Responsive Sidebar Menu to Top Navbar in Bootstrap
Bootstrap 5 Table Always responsive
Bootstrap 5 Accordion Always Open
How to always show first two rows in dynamic collapse using Bootstrap ?
Bootstrap 5 Navbar Supported Content
How to create a navbar in Bootstrap ?
How to design full width dropdown Navbar using Bootstrap ?
How to align navbar items to the right in Bootstrap 4 ?

B
bhushanc2003
Article Tags :
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox