Looking to make the Bootstrap navigation bar fixed when scrolling down

Can someone help me fix this bootstrap code to stay fixed at the top of the webpage while scrolling down?

Below is the bootstrap code that I currently have. I need assistance in making it change from a static position to a fixed one as users scroll down the page. 

     <div class="header_top" id="home">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler navbar-toggler-right mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll" href="#menu">Menu</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="blog.html">Blog</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        Drop Down
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#"></a>
                        <a class="dropdown-item" href="gallery.html">Gallery</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="404.html">Services</a>

                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>

            </ul>
        </div>
    </nav>

</div>
csshtmltwitter-bootstrap-3

Answer №2

If you're looking to maintain the navigation bar at the top of the page, consider using CSS:

.navigation {
    position: fixed;
}

This will ensure that the navigation bar stays fixed in place even when scrolling down the page.

Answer №3

If you'd like to include a navigation bar with affix functionality in your website, simply add the following code snippet: 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">

data-spy="affix" data-offset-fop="scroll amount"

For a practical example, check out this link: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_affix&stacked=h

Another illustration can be found here:

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

Having trouble getting JavaScript to replace tags in HTML

I've been working hard to replace all the shared code in posts on my website, but I'm having trouble getting it to work. I want everything inside <pre><code></code></pre> tags to be colorized using CSS. Here's a sampl ...

javascriptjqueryhtmlcss

A React component that dynamically increases the padding CSS value to render its children components

Greetings! I am working on a scenario where a React component needs to pass a padding value to styled components while incrementing it based on the nested rendering level. For example, imagine a List component that must display a parent and child component ...

javascriptcssreactjsstyled-components

Is it possible to create a navigation list that includes bullets and changes background color using only CSS?

When adding a bullet image to each navigation li element, the typical method involves using the background property. However, if we want to include a background change as well, it is necessary to ensure our anchors inside li have "display:block;" set. Is ...

csshtml-lists

Tips for effectively extracting information from a website using R

Looking for advice on scraping this web page with ASP and passing parameters? Take a look at the URL: I've made an attempt using the code below, but it's not as efficient as I'd like it to be (the results are not accurate, especially with m ...

htmlasp.netr

"Mastering the art of CSS: when the cascade goes

Can someone assist me with a tricky cascading style problem that is not so straightforward? I need to override a CSS child style with another style of equal importance (012), without changing its order in the CSS sheet... To see a concrete example, pleas ...

css

Website route organization tool

Seeking assistance with implementing a route planning feature on my website. The user should be presented with multiple route options upon entering their origin and destination. Take a look at this reference site for inspiration: Any help would be great ...

phphtmlcsswebhttps

Developing a JavaScript program that automatically updates the score in a Tic Tac Toe

I am currently working on developing a "Tic Tac Toe" game, but I have encountered an issue. Everything is functioning properly except for one aspect: when the game concludes and all squares are filled with either O or X, or when either X or O wins, it doe ...

javascriptjqueryhtml

Using CSS to encompass a group of words within a circular shape

I am attempting to encircle multiple words within one circle, but currently each word is enclosed in its own circle. Below is the code I am currently using. HTML <div class="numberCircle"> <span>Circle all words</span> </div> ...

htmlcss

Unable to Modify Header Link Font Color

I've been struggling to change the link color of a header on my website. By default, the link color in my CSS is blue, but I want the links in my entry headers to be gold. I thought this would be a simple task - just define the link color for the hea ...

csswordpress

Experiencing blank areas when I try to minimize the screen while using Chrome

While using Chrome, my webpage looks perfect in normal mode. However, when I minimize the screen, white space appears at the bottom and some content gets hidden. The page is built using reactjs, html, and css. Interestingly, it works fine for IE in both no ...

htmlcssreactjs

Tips for avoiding the security risk of "A potentially hazardous Request.Form" in requests

After integrating a FreeTextBox control into my webpage, users can input HTML tags. However, upon submitting to the server, I encounter the following error: A potentially dangerous Request.Form value was detected from the client (GestisciPagine1_txtTest ...

c#.nethtmlsecurity

Assistance required: Click on the button to select and copy all text within the specified paragraph ID

Hey there! I've got a div with a dropdown menu that reveals text and images based on the selected option. What I want to achieve is having a button that allows users to copy all the content inside the div. Below is my sample code for the div dropdown ...

javascriptjqueryhtmlcss

A guide to adjusting the top margin of centered elements in React

I've got elements inside the App_body, and I've centered them both horizontally and vertically using Flex. <div className="App-body"> < Element1 className="element1"/> < Element2 /> < Element3 /> </div> .App-body ...

htmlcssreactjs

SVG path tooltips are not functioning properly, unlike in regular HTML where they work perfectly

I have a CSS/HTML code that works perfectly in plain HTML and is also shown as an example at the end of the demo. However, it fails to work properly in SVG. Upon inspecting the element, I found that the :after code is being called but the tooltip remains ...

htmlcsssvg

How to align text to the right with ellipsis and button in a ReactJS component

In a specific scenario, I need to display a button on the right corner of the header. The selected filter value should appear next to the filter button like this: | Between 01/23/2018 and 07/30/2018 {button}| As the user changes the screen size, I want to ...

htmlcssreactjsellipsis

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

htmlcss

"Selecting the hue of an image on an input

Is it possible to easily incorporate color images into a design? I am struggling to find the property that will allow me to do so. There is a button that contains an image. .button { background: url('../image/arrow.png') 189px no-repeat ...

css

The div seems to be out of place and sitting within another div in a

I'm working on a school project to create a mock website, but I'm facing an issue with my div elements being misaligned and showing up in the wrong place. Here's how it currently looks: [ Here's how I want it to look (designed with ph ...

htmlcss

Discovering the maximum font size that can be displayed on a single line in CSS

I am working with a wrapper div tag that has the capability of adjusting its dimensions. <div class="wrapper"> <p class="inside-text">Some text</p> </div> How can I use CSS to set the font-size of inside-text to be as large as ...

htmlcss

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...

htmlcsstwitter-bootstrap