Keep the navigation bar in motion as the page is scrolled

I am currently designing a webpage with Bootstrap and have a fixed top navbar along with a side navbar that uses scrollspy for content navigation. However, as I scroll down the page, the side navbar remains static and does not move along. I would like both the top and side navbars to scroll together with the page for better user experience without having to scroll back up.

Any assistance on achieving this behavior is highly appreciated. Thank you in advance!

Below is my HTML code:

<!DOCTYPE html>
<html>

<head>
    <!DOCTYPE html>

    <html lang="en">
    <meta charset="UTF-8">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        
    <title>Historical Adventures</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #201d1f; position: sticky;" id="navbar">
        <a class="navbar-brand" href="#" style="font-size: 22px">Historical Adventures</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 text-light" href="">Placeholder</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link text-light" href="">Placeholder</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- header -->
    <header class="jumbotron jumbotron-fluid text-light" style="background-color: #262626;">
        <div>
            <center>
                <h1 class="display-3">placeholder</h1>
                <h5 class="lead">placeholder</h5>
            </center>
        </div>
    </header>
    
    <!-- body/content -->
    <div class="container p-0 m-0">
        <div class="row m-0 p-0">
            <!-- side navbar -->
            <div class="col-3 m-0 p-0" style="float: left; position: sticky;">
                
                <nav id="side-navbar" class="navbar navbar-light flex-column p-3 ml-0" style="float: left; background-color: #333333
; border-radius: 10px;">
                    <nav class="nav nav-pills flex-column">
                        <div class="mt-2">
                            <a class="nav-link" href="#introduction">Introduction</a>
                            <a class="nav-link" href="#introduction2">Early Civilizations</a>
                        </div>
                        
                        <div class="mt-2">
                            <a class="nav-link" href="#indusvalley">Indus-Valley Civilization</a>
                            <nav class="nav nav-pills flex-column ml-3"">
                                <a class="nav-link" href="#city-profile">City Profile</a>
                                <a class="nav-link" href="#trade-economy">Trade and Economy</a>
                                <a class="nav-link" href="#cultural-artifacts">Cultural Artifacts</a>
                                <a class="nav-link" href="#administration">Administration</a>
                                <a class="nav-link" href="#indus-script">Indus Script</a>
                                <a class="nav-link" href="#legacy">Legacy</a>
                                <a class="nav-link" href="#conclusion">Conclusion</a>
                            </nav>
                        </div>
                    </nav>
                </nav>
                
            </div>


            <!-- main content -->
            <div class="col-9" data-bs-spy="scroll" data-bs-target="#side-navbar" data-bs-offset="0" tabindex="0" data-bs-smooth-scroll="true">
                <!-- content in here -->
            </div>
        </div>
    </div>

    <footer class="jumbotron jumbotron-fluid mb-0" style="background-color: #242424;">
        <div>
            <center>
                <a href="#" class="m-1"><i class="fab fa-facebook text-light" style="font-size: 24px;"></i></a>
                <a href="#" class="m-1"><i class="fab fa-instagram text-light" style="font-size: 24px;"></i></a>
                <a href="#" class="m-1"><i class="fab fa- text-light" style="font-size: 24px;"></i></a>
            </center>
        </div>

        <div style="background-color: #202020">
            <h6 class="text-light"><a href="">Website Source Code</a></h6>
        </div>
    </footer>
</body>

</html>

Here's my CSS code:

html {
  height: 100%;
  width: 100%;
}

.nav-link:hover {
    background-color: #2275e2;
    border-radius: 5px;
    color: whitesmoke;
}

Link to view the project on Codepen.io: https://codepen.io/AverageDogeEnjoyer/pen/vYbLzjw?editors=1010

htmlcssbootstrap-5

Answer №1

If you're using bootstrap 4.5, you have the option to fix the navigation bar at the top by adding the fixed-top class.

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background-color: #201d1f; position: sticky;" id="navbar">

To make your sidebar sticky at the top when scrolling and keep it on screen, adjust the top property as needed in your custom CSS.

Add some custom CSS code to achieve the sticky effect:

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Make sure to assign the .sidebar class to your sidebar navigation menu to apply the styling.

<nav id="side-navbar" class="navbar navbar-light flex-column p-3 ml-0 sidebar" style="float: left; background-color: #333333; border-radius: 10px;">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for integrating fingerprint recognition into a web application using either Laravel or Django?

For a school project, I've been tasked with creating a web application that can fingerprint users or visitors. This means gathering details about their device such as OS, browser, IP address, country, city, and more. The app needs to be modern and re ...

javascriptphphtmldjangolaravel

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

javascriptjquerycsswordpress-theming

Switching images with Jquery

Seeking help to create an FAQ page using HTML, CSS, and jQuery. My goal is to rotate an arrow when a question is opened and revert it back when another question is clicked. I've successfully achieved this with <p> tags but facing issues with the ...

jquerycsshtml

Unwanted gap appears in the image slider

There seems to be a pesky little gap right below my image slider that I just can't seem to get rid of. I was hoping to spruce it up with a box-shadow, but when I tried it out on jsfiddle, it ended up looking pretty awful because of the annoying gap. I ...

htmlcssimageslider

React-Toolbox: Attempting to horizontally align the Cards side by side

When working with React-Toolbox, I encountered an issue with aligning Card elements horizontally. I attempted using display: inline-block, which successfully separated them into three distinct cards as desired. However, they did not align next to one ano ...

cssreactjsreact-toolbox

Learn how to easily reset the index value within the same template in Angular

In my template, I have 3 tables with the same JSON data as their parent elements. <tbody> <ng-container *ngFor="let row of reportingData.RecommendationData; let i=index"> <tr *ngIf="row.swRecommendations"> <td& ...

htmlangularhtml-table

Activate JavaScript functions by pressing the enter key, allowing for various searches, AJAX requests, and DataTable displays to occur seamlessly without the need to refresh

I recently developed a web page that integrates an AWS API interface to interact with an RDS Aurora MySQL Serverless database. Users can input a SQL statement and click the Query button, which triggers an AJAX request, returns JSON data, and converts the d ...

javascriptjqueryhtmlajaxdatatables

Jquery adds a fun, wobbly effect to animations

I'm experiencing an issue with the animation I've implemented causing some slight shaking and wobbling of the text and certain elements which is affecting the overall look. You can view a live example of this behavior here: This problem specific ...

javascriptjqueryhtmlcss

Dropdown list remains open despite a selection being made

My problem arises when I attempt to select an item from the list, as the dropdown menu does not populate automatically and the list remains open. Here is the HTML code for the dropdown list: <label id='choose' for='options'>Sele ...

javascriptjqueryhtmldrop-down-menuhtml-select

What causes the menu icon to shift to the left upon clicking it?

I'm currently working on a website project that involves implementing a fixed navbar with jQuery sliding animation for the menu. However, I've encountered an issue where the "menu_icon" is getting pushed to the left every time the menu slides dow ...

javascriptjqueryhtmlcss

What are the best methods for maintaining the appearance of my website when resizing my browser window?

I am replicating the Twitter profile page, but I am facing an issue where the text and images get jumbled together whenever I resize my browser. This results in a messy appearance of the page. How can I ensure that the text and images stay in the same rela ...

htmlcsstwitter-bootstrapresponsive-design

Submit Button Not Responding on Mobile Device

I am facing an issue with my VueJs app. The contact form works perfectly on browsers, but when accessed from a smartphone or tablet, it fails to function properly. I have tried two different implementations to resolve the problem. Here is the first implem ...

htmlformsvue.jsvuejs2

The mobile website layout appears immaculate on the emulator, but it doesn't translate well on real mobile devices

Recently, I delved into the world of html/css/javascript and decided to create a website as a way to practice my skills. However, I have come to realize that many of the methods I used are not considered best practices. I am committed to improving and will ...

htmlcss

Place the sorting image on the left side of the DataTable header

I am currently using DataTable in my code. The sorting images in the header of the table are on the right side while the labels are on the left, as shown below: https://i.sstatic.net/Bz6EO.jpg However, I would like to switch this arrangement and have the ...

jqueryhtmlcssdatatables

Is it possible for a gradient between accessible colors to also be accessible?

Ensuring accessibility on websites is a top priority for me, with our goal being at least AA standard. We utilize tools like and to test the contrast between background colors and black or white text. For example, let's consider white (#fff) text a ...

csswebcolorsaccessibility

What changes can be made to the HTML structure to ensure that two form tags function separately?

Hey there! I'm currently tackling a web project that involves incorporating two form tags on one page, each with its own distinct purpose. Nevertheless, it appears that the inner form tag isn't behaving as it should. My suspicion is that this iss ...

javascripthtmlejs

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Hello there! I've integrated full calendar into my Angular project and I'm facing a challenge. I want to restrict users from defining the duration of an event by holding click on an empty schedule in the weekly calendar, where each date interval ...

javascripthtmlangulartypescriptfullcalendar

Creating a responsive bootstrap card-tall for mobile devices

I'm currently using Bootstrap cards to create a gallery-like display of images. To style the images, I'm also utilizing the card-tall class. Since these images are posters, they naturally occupy a lot of space. Here's how it appears on the ...

htmlcssbootstrap-4responsive-designbootstrap-cards

Issue encountered when trying to attach a hover event to the items in a comb

Currently, I am facing a specific situation. The requirement is to display a custom tooltip when the mouse hovers over the combobox items (specifically the "option" tag). Initially, my solution involved using the title tag. While this method worked effecti ...

javascriptjqueryhtmlinternet-explorer

My jquery seems to be malfunctioning -- can't quite figure out what the issue is

My jquery is not working as expected! It was functioning fine when I included the script directly in the HTML file, but now that I have moved it to a separate file, it's not working. I even tried changing the file name, but no luck. //HTML file loca ...

jqueryhtml