What is the best way to ensure a navigation link stops scrolling at the bottom of a navbar that is set to position: sticky?

I am utilizing Bootstrap 5 for my website, and I have a sticky-top attribute on my navbar. When I click on one of the links in the navigation bar, the page scrolls to that section, but some of the content goes behind the navbar. I am looking for a way to make the scrolling stop at the bottom of the navbar so that the section is not cutoff.

Below is the main part of the HTML code:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Body -->
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="100" data-bs-smooth-scroll="true">
  <!-- Navigation Bar-->
  <nav id="navbar" class="navbar navbar-expand-md bg-dark navbar-dark py-3 sticky-top">
    <div class="container">
      <a href="#" class="navbar-brand">Navbar</a>
      <button class="navbar-toggler collapsed d-flex d-md-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon mid-bar"></span>
            <span class="toggler-icon bot-bar"></span>
            </button>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav nav-pills ms-auto">
          <li class="nav-item">
            <a href="#about" class="nav-link">About Us</a>
          </li>
          <li class="nav-item">
            <a href="#services" class="nav-link">Services</a>
          </li>
          <li class="nav-item">
            <a href="#art" class="nav-link">Artwork</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div id="navbar">
    <h4 id="about">About Us</h4>
    <p>Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 in 1939.</p>
    <img class="w-100" src="https://static1.cbrimages.com/wordpress/wp-content/uploads/2020/08/batman-2.jpg" />
    <h4 id="services">Our Services</h4>
    <p>Superman is a fictional superhero. The character was created by writer Jerry Siegel and artist Joe Shuster, and first appeared in the comic book Action Comics #1. The character regularly appears in comic books published by DC Comics, and has been
      adapted to a number of radio serials, movies, and television shows.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/marvel_dc/images/a/a5/Superman_Vol_5_1_Textless.jpg/revision/latest?cb=20180711061148" />
    <h4 id="art">Community Artwork</h4>
    <p>Yoda was a legendary Jedi Master and stronger than most in his connection with the Force. Small in size but wise and powerful, he trained Jedi for over 800 years, playing integral roles in the Clone Wars, the instruction of Luke Skywalker, and unlocking
      the path to immortality.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/starwars/images/d/d6/Yoda_SWSB.png/revision/latest?cb=20150206140125" />
    <h4 id="contact">Contact Us!</h4>
    <p>Discovered as a slave on Tatooine by Qui-Gon Jinn and Obi-Wan Kenobi, Anakin Skywalker had the potential to become one of the most powerful Jedi ever, and was believed by some to be the prophesied Chosen One who would bring balance to the Force.</p>
    <img class="w-100" src="https://vignette.wikia.nocookie.net/disney/images/5/50/Profile_-_Anakin_Skywalker.png/revision/latest?cb=20190313110540" />
  </div>
</body>
javascripthtmlcssbootstrap-5

Answer №1

To create a sticky header using Bootstrap, simply utilize the fixed-top class as demonstrated below:

<div class="fixed-top">
Insert your content here
</div>

Answer №2

The issue arises from the lack of padding and margin in your content boxes. There are two potential solutions to address this problem. The first solution involves adjusting the padding-top to match the height of your navigation bar. Alternatively, you could implement a scroll event in Javascript to set an offset equal to the height of the navigation bar. I have included the CSS code for the first solution, but I am also available to assist you with implementing the second solution if needed.

#about,
#services,
#art,
#contact{
padding-top:72px;
}

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

Gridsome server-side rendering encounters issues with Auth0 authentication when the window object is not defined

After successfully following the Auth0 Vuejs tutorial with Gridsome during development, I encountered a problem when trying to build using gridsome build. The build failed because window was undefined in a server context. I discovered some issues in the A ...

javascriptvue.jsauth0server-side-renderinggridsome

Compare object key and array in Javascript to create a new object

Can you aid me in achieving the following output by comparing var1 and var2, and obtaining the output based on var2 where the keys are provided in a string array? var1 = {a:1, b:2, c:3, d:4}; var2 = ['a', 'd']; The expected output is ...

javascriptarraysjsonoopes6-class

Perform an SQL function to select and update data

I need to run this code, but I'm missing one key variable that I can't seem to locate. Here's my current code snippet: SELECT CODE = 'P1R2G1' and CATEGORY = '20M' IF RANK op1 = '1' THEN UPDATE tourneyeventga ...

phphtmlsqlphpmyadminsql-update

Using JavaScript to Set Values and Manage Session State in APEX

Trying to utilize JavaScript in Oracle APEX to set the value and session state. See below function that is being called: function updateItemValue(element) { $s('P2020_SELECTED', element); apex.server.process ('MY_PROCESS', { ...

javascriptoracleoracle-apex

Enhancing Real-time Communication with NodeJS and NowJs Servers

Recently, I stumbled upon NodeJS and NowJS and I'm fascinated by the technology. My goal is to develop a Facebook-style instant commenting application where users can post comments that will instantly appear on the feed. After watching the screencast ...

javascriptnode.jsembedded-jettynowjs-sockets

Master the art of handling JSON data within an Angular controller

I've been spending a day attempting to manipulate a JSON in order to display a table, but I can't seem to achieve the desired outcome. My goal is to showcase statistics in a table for each town. If a town has multiple lines, I want to display a ...

javascriptangularjsjson

Transferring information between functions

I am trying to retrieve the value of my drop-down within the getData function. Although the data displays correctly in the run function, I am unsure of how to pass that data down to the getData() function. <select class="form-co ...

javascriptjqueryangularjs

Retrieving a JSON element using its name within a subquery in a Node.js MySQL environment

I've been working on a project that involves NodeJS and Mysql for the backend. Everything was going smoothly until I encountered a small issue after adding a SUBQUERY. Below is the Mysql Query: var GetHistoryPayments = function(code){ var qu ...

javascriptmysqlnode.jsexpress

What is the best way to show JSON array data in jQuery without using double quotes?

I have encountered an issue where I need to remove the double quotes from my json_encode output. To achieve this, I have used the following code: $json_string = json_encode($data); $json_string = str_replace('"','',$json_string); echo ...

javascriptjquerymysqljsonajax

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

javascriptjqueryhtmlcss

Guide on Ensuring a Fixed Div Covers the Entire Width of the Screen

Hello everyone, I need some help with formatting my social media widgets on my website. I want them to span the entire width of the screen, align to the right, and remain fixed at the top of the page. You can check out the site totempole.ca for reference. ...

htmlcss

Having trouble simulating getSignedUrl from npm package "@aws-sdk/cloudfront-signer" with jest

I attempted to simulate the npm module "@aws-sdk/cloudfront-signer"'s function getSignedUrl using jest. Below is the code snippet: import { getSignedUrl } from '@aws-sdk/cloudfront-signer' let url = 'test value', // confidential k ...

javascriptnode.jsamazon-web-servicesamazon-cloudfront

Why is the responseText from XMLHttpRequest always stripped of tags in AJAX?

Whenever the server sends the XML string to the client using the XMLHttpRequest object, I noticed that when I insert the text inside the div tags, it appears without any tags. However, I actually need the XML tags to be present so that I can parse the cont ...

javascriptajax

Updating the properties of items in an array using React

Today, I was working on React and found myself stuck due to my limited JavaScript knowledge. I am trying to update the "name" property value of any object in this array. Check out the Codesandbox demo: https://codesandbox.io/s/dank-rain-udjcxe?file=/src/ ...

javascriptreactjsarraysobject

Adding elements to a JSON array in JavaScript/AngularJS

Looking for help with inserting a new item "uid" into a JSON array. Here is the initial array: var testArr=[{name:"name1",age:20},{name:"name1",age:20},{name:"name1",age:20}] The desired output after inserting the "uid" would be: var testArr=[{name:"nam ...

javascriptjson

Any suggestions on resolving the "script timeout" issue while running a script using Python's SeleniumBase Library?

Recently starting to use Python, I am currently using Python's seleniumbase library to scrape a website and need to periodically run this fetch script. While experimenting, I encountered a script timeout error when the response time exceeded around 95 ...

javascriptajaxfetch-apiseleniumbase

The function and if-else statement are experiencing malfunctions

Currently in the early stages of learning coding, I've been focusing on building a solid foundation by practicing with CodeWars. Utilizing this platform for practice has been beneficial because it offers solutions for guidance. While attempting to wor ...

javascriptarraysfunctionloops

Troubleshooting the Checkbox Oncheck Functionality

Before checking out the following code snippet, I have a requirement. Whenever a specific checkbox (identified by id cfc1) is clicked, it should not show as checked. I have implemented the onCheck function for this purpose, but I'm struggling to fig ...

javascripthtmlreactjsmaterial-uiweb-component

Confirming user banking information is necessary solely for account activation through Stripe

I've been working with NodeJS and ExpressJS Is there a way to set up account verification with Stripe? I want to confirm that users have bank accounts without charging them. What kind of information can I access through this verification process? My ...

javascriptnode.jsnpmstripe-payments

Creating an HTML table layout: A step-by-step guide

I am in need of assistance with designing an HTML layout. My goal is to display 3 columns for each table row as described below: Column #1 will contain text only. Column #2 will have an inner table, which may consist of 1 or 2 rows depending on the cont ...

htmlcss