Tips for positioning a sticky div underneath a stationary header

I'm currently utilizing Bootstrap 4 for my project, and I am encountering an issue with maintaining a div that has the class "sticky-top" just below a fixed navbar. Despite attempting to use JavaScript to replace the CSS while scrolling, it hasn't proven effective. I am aware that there is a method to assign an ID to the Navbar and instruct it not to scroll beyond a certain point, but unfortunately, my searches on Google have been fruitless. I would greatly appreciate any assistance.

Below is the code snippet that I am working with:

<header class="header_area">
<nav class="navbar navbar-expand-lg menu_one menu_four">
    <div class="container">
        <a class="navbar-brand sticky_logo" href="#"><img src="images/upayify-logo-white.png" srcset="images/logo2x-2.png 2x" alt="logo"><img src="images/upayify-logo.png" srcset="images/logo2x.png 2x" alt=""></a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="menu_toggle">
                        <span class="hamburger">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                        <span class="hamburger-cross">
                            <span></span>
                            <span></span>
                        </span>
                    </span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav menu w_menu ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.php">
                        <i class="fa fa-home"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        How It Works
                    </a>
                </li>
            </ul>
        </div>
        <a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-lock"></i> Login</a>
        <a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-user-plus"></i> Sign Up</a>
    </div>
</nav>


  <div class="row row-eq-height featured_item">
                <div class="col-md-5 send-card order-md-last">
                    <div id="get-started" class="card sticky-top">
                        <div class="card-body">
                            <form>
                                <div class="row">
                                    <div class="col-12 form-group">
                                        <label for="exampleInputEmail1">I'm sending money from...</label>
                                        <div class="input-group mb-2">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><span class="flag-icon flag-icon-us"></span></div>
                                            </div>
                                            <select class="form-control">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 form-group mt-2 mb-0">
                                        <label>I'm sending to...</label>
                                        <div class="input-group mb-2">
                                            <div class="input-group-prepend">
                                                <div class="input-group-text"><span class="flag-icon flag-icon-in"></span></div>
                                            </div>
                                            <select  class="form-control">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <hr>
                                    </div>
                                    <div class="col-12 mb-3 text-center conversion">
                                        <span class="flag-icon flag-icon-us mr-2"></span>1 <span class="mr-2 ml-2">=</span> <span class="flag-icon flag-icon-in mr-2"></span>69.64
                                    </div>
                                    <div class="col-12 mt-2 index-form-btn">
                                        <a href="#" class="btn_hover agency_banner_btn pay_btn pay_btn_two btn-block"><i class="fa fa-rocket"></i> Get Started Now!</a>
                                    </div>
                                    <div class="col-12 text-center">
                                        <p class="small">View <a href="#">Terms & Conditions</a> for more details and fees</p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-7 d-flex order-md-first">
                    <div class="row">

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


.send-card{
top: -225px;
z-index: 4;
margin-bottom: -200px;}
javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To style the div beneath the navbar, you can use top: ##px; (replace ## with the navbar's pixel height). Additionally, you can add either position: sticky; or position: fixed; depending on whether you want a sticky or fixed behavior.

Check out this jsfiddle link for an example of the described sticky behavior.

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

Is it possible for an HTML file to not recognize an external CSS stylesheet?

I've been trying everything, but I can't seem to get these two documents to work together. I'm confident that the CSS file is linked correctly with the right file name. I decided to give it a shot after watching this coding blog tutorial on ...

htmlcssyoutubeblogs

Tips for displaying or concealing table rows with form fields on a php site by utilizing jquery/ajax and a drop-down menu selection

Is there a way to hide or unhide table rows with form fields in a php website based on a dropdown selection using jquery/ajax? The current script I have only hides the field, leaving blank rows. How can I also hide the respective table rows? Thank you for ...

javascriptphpjquery

Ways to prevent the repetition of keys associated with values

I am currently dealing with an array called serialNumbers, which can have different structures. For example: lot: 1 Serial: 2 lot: 1 Serial: 3 lot: 1 Serial: 4 ...or it could look like this: lot: 1 Serial: 5 lot: 1 Serial: 9 lot: 8 Serial: 2 lot: ...

javascriptvue.js

Which property within the <mat-option> element is used for toggling checkboxes on and off?

I'm experimenting with dynamically checking/unchecking a checkbox in mat-option. What attribute can I use for this? I've successfully done the same thing with mat-checkbox using [(ngModel)]. Here's the snippet of my code: app.component.html ...

htmlangulartypescriptcheckboxangular-material

Resolve the conflict with the upstream dependency when installing NPM packages

I'm encountering an issue while attempting to npm install vue-mapbox mapbox-gl - I keep getting a dependency tree error. Just to provide some context, I am utilizing Nuxt.js SSR with Vuetify and have not installed anything related to Mapbox before ru ...

javascriptnode.jsnpmdependenciesmapbox

`How to implement a dark mode feature in Tailwind CSS with Next.js and styled-jsx`

My website is created using Next.js and Tailwind CSS. I followed the default setup instructions to add them to my project. In order to style links without adding inline classes to each one, I also integrated styled-jsx-plugin-postcss along with styled-jsx ...

javascriptreactjsnext.jstailwind-cssstyled-jsx

File not being successfully sent through form submission using Jquery

I have created a form setup like this: <label for="pdffile">Please Upload File</label> <form class="form-horizontal" role="form" method="POST" name="upload" id="upload" enctype="multipart/form-data"> {{ csrf_fi ...

phpjqueryhtmllaravel

Leveraging server-side data with jQuery

When my client side JQuery receives an array of JSON called crude, I intend to access and use it in the following way: script. jQuery(function ($) { var x = 0; alert(!{JSON.stringify(crude[x])}); ...

javascriptjquerynode.js

Can you explain the significance of the ">" symbol within CSS coding?

Seeking some quick points for those in the know. Can someone provide a thorough explanation of the meaning and proper usage of the > symbol? Appreciate it. ...

htmlcsscss-selectors

Show a specific item when selecting an option from a dropdown menu

Hey there, I have a question regarding creating a theme for the Genesis Framework. Right now, I'm facing a challenge with one particular element. Here's the situation: I've got two drop-down lists, but I only want the second one to be visib ...

javascriptjqueryhtmlwordpressdrop-down-menu

Exploring the power of Node.js and EJS through the art of

Recently delving into the world of node.js, I encountered a puzzling issue with my EJS template. It seems that my for loop is not executing properly within the EJS template while attempting to create a basic todo app. Below is the structure of the project ...

javascriptnode.jsloopsexpressejs

Is there a way to point my Github URL to the index file within a specific folder?

The actual working location of my website: My desired working location for the site: Originally, I had my index.html file in the main repository, but later moved it to an html folder along with other html files for better organization. How can I ensure t ...

javascripthtmlcssgitgithub

Refresh the div by clicking it

$(window).load(function() { $("#Button").click(function() { alert('clicked') $("#div").load(" #div > *"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script ...

javascriptjqueryhtmltwitter-bootstrap

Most effective method to change a specific attribute in every element within a nested array of objects

Below is an example of my data object structure: const courses = [ { degree: 'bsc', text: 'Some text', id: 'D001', }, { degree: 'beng', text: 'Some text&apos ...

javascriptarraysloopsforeachiteration

Validate if a string in JQuery contains a specific substring

How can I determine if one string contains another string? var str1 = "ABCDEFGHIJKLMNOP"; var str2 = "DEFG"; What function should I utilize to check if the string str1 includes the string str2? ...

javascriptjquerystringcomparisoncontains

Why won't my redux application store the results of an asynchronous API request using redux-thunk's caching mechanism?

I am new to using Redux in my project. Currently, I am developing an application that displays a list of soccer leagues in each country. The process involves fetching a list of countries first, then using the country names to fetch the soccer leagues. Not ...

javascriptreactjsreduxredux-thunk

Suggestions for placing a script under the scripts menu in Illustrator CS5.1

My script for Adobe Illustrator CS5.1 is not showing up in the scripts menu despite trying to place it in various directories such as: C:\Program Files\Adobe\Adobe Illustrator CS5.1\Presets\en_GB\Scripts\ C:\Progra ...

javascriptadobe-illustrator

Choosing a radio button based on the stored value within a variable

When transferring a variable (active) from my route to EJS, I initially found it easy to simply display its value: <!-- Active Text Input--> <div class="form-outline mb-4"> <label for="active" class="form-label">Active</label> ...

javascriptexpressejs

Unusual trait of TrackballControls.target within the world of Three.js

My current project involves simulating a 3D distribution of galaxies. In this simulation, the galaxies are represented as points. question1.htm references galaxydata1.txt to calculate and load the galaxy positions: rawFile.open("GET", "galaxydata1.txt", ...

javascriptthree.jscontrolstrackball

Error message when trying to get tree from Json using jqTree: "Oops! $(...).tree is not a valid function."

Currently, I am utilizing jqTree to display JSON data in a tree format. However, as I was implementing the demo of jqTree, an error occurred: "Uncaught TypeError: $(...).tree is not a function" ...

javascriptjqueryjsontreejqtree