Creating a Bootstrap 4 navigation bar that sticks to the bottom of the page, allowing the main content to smoothly scroll

Despite my best efforts, I can't seem to get this to work as intended.

I'm struggling to prevent the "main" content (in this case, the images) from disappearing under the bottom navigation bar.

In the provided jsfiddle link, you can see that the image is being partially cut off, which is not what I want.

Is there a way to treat the "Main" content as a separate scrollable entity?

The ultimate goal is for the last image to be fully visible on the page when scrolled to the bottom.

Current code can be found here.

Here is the code snippet:

<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
    <link href=" /static/custom.css" rel="stylesheet">
    <script src="/static/funcs.js?v=3"></script>
    <script src="/static/confetti.js"></script>
</head>
<body style="background-color: #F3F9E3">

<!-- Rest of the HTML code here -->

</body>

Answer №1

If you want to achieve a sticky-bottom effect, you can define a CSS class like this:

.sticky-bottom {
  position: sticky !important;
  bottom:0;
}

Next, simply replace the fixed-bottom class in your navbar with sticky-bottom:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-bottom">

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

Linking multiple font files of the identical typeface to their respective CSS styles

I recently purchased the Didot font from myfonts.com, which includes different styles such as regular, bold, italics, and bold italics (each in separate files). While using WordPress, I noticed that when my users write articles with bold and italic text, ...

What is the best way to include bootstrap using webpack?

I am currently building a webapp using Typescript and webpack. I have been able to successfully import some modules by including them in my webpack.config.js file as shown below. However, no matter how many times I attempt it, I cannot seem to import the b ...

Contrasting date and time components within a JQuery date time picker

Utilizing Jquery, I have implemented two date time pickers. Upon clicking the show button, I require the difference between the two dates to be displayed in the textbox identified as result. For example: Time1 = 04/30/2014 10:27 am Time2 = 05/01/2014 1 ...

Activate the Bootstrap 5 responsive font sizing feature (RFS) for the base font elements

I'm attempting to utilize Bootstrap's RFS functionality in version 5.1.3 to apply font sizing globally. Within my SCSS file, I've defined some basic font sizes, imported the Bootstrap SCSS files, and configured the font size settings. Howev ...

Applying CSS to prevent elements from overlapping by adjusting their vertical positioning

I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the v ...

Implementing a Where Condition in JavaScript with the MongoDB whereObj

Working on a project involving JavaScript and MongoDB has led me to a specific collection named test_collection. Within this collection, there is a field/object called test_field_1 which contains test_sub_field_1 and test_sub_field_2. Currently, I am sett ...

Two Bootstrap modals with customized maximum width and height dimensions

I'm working on designing 2 modals for a Bootstrap themed webpage. https://i.sstatic.net/N4gNl.png One of the modals, the wider one, has been successfully created. Below is the CSS code: .modal-dialog { width: auto; height: auto; positio ...

Is there a way to convert arrow functions in vue files through transpilation?

I have developed a Vue application that needs to function properly in an ES5 browser (specifically iOS 9). One issue I've encountered is that some of the functions within the Vue components are being transformed into Arrow functions: ()=>, which i ...

Struggling to position the form perfectly in the center of the screen both vertically and horizontally

I've been attempting to position this form both horizontally and vertically in the center. I've utilized the appropriate Bootstrap 4 classes, but it's still appearing at the top near the nav bar. Below is the code: Form Screen <secti ...

Trouble with mapping an array in my Next JS application

When working on my Next JS app, I encountered an error while trying to map an array for the nav bar. The error message reads: TypeError: _utils_navigation__WEBPACK_IMPORTED_MODULE_6___default(...).map is not a function. Here is the code snippet that trigge ...

What is the best way to utilize JavaScript for both server-side and client-side development, all while effectively sharing code between the two

Recently, I've been brainstorming a side project that I want to dive into for fun. As I explore options, I find myself searching for examples, libraries, and frameworks that could streamline the process of sharing code between the client and server. ...

Vue.js component function "not instantiated within the object"

I recently started learning vue.js and decided to use vue-cli to set up a new project. As I was working on adding a method to a component, I encountered some issues: <template> <div> <div v-for="task in $state.settings.subtasks& ...

The color is missing in the custom button of Bootstrap v5.2

Trying to incorporate a unique button class in Bootstrap with an iris-purple color. Utilized Sass for creating the custom button: @import "../node_modules/bootstrap/scss/bootstrap"; $mynewcolor:#5D3FD3; .btn-purple { @include button-variant( ...

Store a value in a data container

I am completely new to working with node.js and while I have a basic understanding of its functionality, I believe there is something crucial that I am missing when it comes to how fs.write and buffers work. My goal is to send a user-defined variable over ...

bitcoinjs-lib for generating raw transactions in Node.js

var bitcoin = require('bitcoinjs-lib'); var rp = require('request-promise'); var data = Buffer.from('Hello World', 'utf8'); var testnet = bitcoin.networks.testnet; var privateKey = 'p2pkh'; var SourceAddre ...

Currently in the process of refreshing a Drupal website with only access to a HostGator login

I've taken on a last-minute favor for a friend who needs a quick Valentine's Ad added to their existing website, which was built with Drupal in 2010 by someone they no longer have contact with. I don't have much experience with Drupal, but I ...

Exploring the functionality of test code within an rxjs subscription by utilizing the powerful technique of jasmine

My goal is to test the code within an observable subscription: function bar(someStream$: Observable<number>) { someStream$.pipe( map((x) => x + 3), ).subscribe((result) => { SomeService.someMethod(result) }) } I want to ensure t ...

Disabling the child element from triggering the parent element's onclick function, while still allowing it to respond to its own content

My list elements have onclick-functions that change the display of each element and its child div, moving them to the top of the list. Clicking again reverses this effect. The issue arises because the child div contains search fields, clickable pictures, ...

Grabbing <object> HTML using jQuery

One example on my webpage is the presence of the following <object>: <object id="obj1" data="URL"></object> Could you please suggest a method to access this html object using jQuery? ...

Exploring JSON data structures using autocomplete functionalities

Here's the code I'm working with: <s:hidden id="s" value="%{Users}"/> The variable Users contains an array list of User objects. This code is written in Javascript. I want to access Users as JSON for auto-complete functionality: var valu ...