Boost the delay in the transition speed for hiding the Navbar while scrolling down with the help of Bootstrap

Hi there! I am currently learning HTML, CSS, and JS. I'm working on a homepage project using Bootstrap-5 and have successfully integrated a navbar. However, I've noticed that the navbar disappears too quickly when I scroll down. Is there a way to adjust the transition speed of the navbar? I would like to increase the delay before it hides. Any guidance on setting a custom transition speed for the navbar using Bootstrap classes?

.spacer {
  height: 125vh;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e75697569">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav class="navbar navbar-hide-on-scroll navbar-expand-lg navbar-light bg-light ">
  <div class="container-fluid">
    <a class="navbar-brand ps-5 fs-4" href="#">Abdullah Asif</a>
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0 pe-5 fw-bold fs-4">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Work</a></li>
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">About</a></li>
    </ul>
  </div>
</nav>

<div class="spacer"></div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a7bca0bca0">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

javascripthtmlcsstwitter-bootstrapbootstrap-5

Answer №1

If you want to make the navigation bar automatically hide after a certain period of time, you can create an additional class called autohide and apply it to the nav element. To achieve this effect, you will need to add a transition duration property in your CSS like this:

.autohide {
  transition-duration: 3s;
}

Alternatively, you can set the transition duration for all nav elements on your website by targeting the nav selector directly:

nav {
  transition-duration: 3s;
}

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

Use CSS to activate a sibling div when hovering over a button within the same div that contains the button

Is it possible to change the color of div #panel when hovering over the button #button inside div #left? #left #button:hover~#panel { background-color: blue; } #panel { position: absolute; float: r ...

htmlcss

Creating dynamic qtip2 tooltips is an effective way to enhance user interaction on

I am facing an issue where all tooltips work perfectly fine when the page loads, but stop working after data refreshes through ajax. How can I resolve this problem? $(document).ready(function() { // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HT ...

javascriptjquerytwitter-bootstraptooltipqtip2

Creating Custom Filters in Angular using Functions

Attempting to filter ng-repeat using a function instead of an actual filter has presented some challenges. The code snippet below demonstrates the attempt: <tr ng-repeat="(key, value) in dataObj| filter:dataFilter"> The intention is to define dataF ...

javascriptangularjs

Angular promise fails to resolve after an extended period of waiting for a response

My application is designed to send GET requests to my node/express server. In order to monitor changes in the server code, I have implemented a setTimeout function. While the promise function on the client side initially functions properly for a short peri ...

javascriptangularjsnode.jsexpress

Creating a Dynamic Slideshow on Autopilot

My JavaScript skills are not perfect and I'm feeling a bit lost. I have this code for a slideshow, but I want to make it automatic while also allowing users to navigate between images freely. I'm struggling to figure out how to implement this fun ...

javascripthtmlcss

What is the syntax for implementing the 'slice' function in React?

While working on my React app, I encountered an issue when trying to extract the first 5 characters from a string using slice. The error message displayed was: TypeError: Cannot read property 'slice' of undefined I am utilizing a functional compo ...

javascriptnode.jsreactjsnext.jsslice

Retrieve HTML classes within JavaScript textual templates

<!-- TEMPLATE UPLOAD --> <script id="template-upload" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-upload fade"> <td class="name"><span>{%=file.name%}</span></td> <td ...

javascriptjqueryhtmltemplates

Storing the information received from an API as an HTML element

My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this: [ {"user": "bob", "groups": ["bobsGroup"], "policies": ...

javascripthtmljsonaws-lambdaaws-api-gateway

Struggling to find the definition of a Typescript decorator after importing it from a separate file

Consider the following scenario: decorator.ts export function logStuff(target: Object, key: string | symbol, descriptor: TypedPropertyDescriptor<any>) { return { value: function (...args: any[]) { args.push("Another argument ...

javascripttypescript

Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to hav ...

javascriptjqueryhtmlcss

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

My input HTML field is disabled, but I've noticed that in some browsers (such as Chrome, Edge, Internet Explorer, and Opera), it's still possible to select and copy the text. However, in Firefox, this functionality does not work. To test this yo ...

javascripthtmlcssangular

React checkbox displaying incorrect render

I'm currently working on developing a React component that acts as a tile representation. This particular component consists of a div containing a label and a checkbox. The issue I'm facing is that I can click anywhere on the component to trigg ...

javascriptreactjscheckboxuse-state

The Checkbox generated by Javascript is failing to properly close the tag

When I generate a checkbox in this manner and insert it into my table's [TD] tag: let checkbox = document.createElement('input'); checkbox.type = 'checkbox'; td.appendChild(checkbox); It yields: <tr> <td> ...

javascript

Is there a way to extract shared properties within a Material UI style declaration?

I am working with a specific set of style rules that define different statuses: status_in_progress: { fontSize: 14, backgroundColor: theme.palette.success.dark, padding: 2, paddingLeft: 5, paddingRight: 5, display: "inline-bl ...

cssreactjsmaterial-ui

What is the best way to send a variable from my controller to the HTML and then to a JavaScript function?

After my controller runs its course, it finally outputs the following: res.render('my-html', { title: `${title}`, myVar1, myVar2 }); Once this data is rendered in the HTML, I am able to directly display it. However, my goal is to then pass thes ...

javascriptnode.jsmongodbexpresspug

Converting a string value into an object in Javascript using a command that functions similarly to eval in Python

When working with Python, the stringValue variable is often assigned as a string: stringValue = '{"DATA":{"VERSION":1.1, "STATE":True, "STATUS":"ONLINE"}}' To convert this string into a Python di ...

javascriptpythonnode.jstypescript

Is it possible to generate an array of all matches found by a regular expression

I am trying to utilize the match-all package in order to match CSS selectors and generate an array of all of them. Here is the code snippet. const matchAll = require("match-all"); let s = `.u-br, .u-nr { blah blah } .u-tr { blah .blah }`; consol ...

javascriptnode.jsregex

How can I arrange the "elements" within a bootstrap container?

Check out the code display here: Here's what I aim for it to show The alignment of the elements has been a real challenge for me. I just can't seem to get the "Gender:", "Gender RadioButton list", "Age:", "Age RadioButton list" to appear in 4 c ...

cssbootstrap-5

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

I am encountering an issue with my dropdown menu not functioning properly in Internet Explorer 10, Chrome, and compatibility mode. Surprisingly, it works flawlessly in the latest version of Firefox. CSS: #menu_items { float: left; width: 600px; } #me ...

htmlcsswebkitgecko

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Link to Codepen My Angular calendar application runs smoothly without any errors. However, I am encountering an issue where the CSS styles are not being applied to the page. When I implemented this separately, everything worked fine. But as soon as I inc ...

javascriptjqueryhtmlcssangular