The top navbar does not stay fixed when the page is scrolled

Having some trouble with my navbar. Here is the code I'm using:

 <nav id="strumenti" class="navbar navbar-expand-sm navbar-light bg-light sticky">
    <a class="navbar-brand" href="#">
        <img src="C:\Users\Fabry\Desktop\scuola\html\Immagini\UltrasAvellino\clan.ico" width="30" height="30" class="d-inline-block align-top" alt="">
        Ultras Avellino 
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav nav nav-pills" id="pills-tab" role=tablist>
            <a class="nav-item nav-link active" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">War</a>
            <a class="nav-item nav-link" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">Regole</a>
            <a class="nav-item nav-link" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">La nostra storia</a>
            <a class="nav-item nav-link" href="#" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">Contattaci</a>
        </div>
    </div>
</nav>

My navbar is set to have the sticky class, so it should remain at the top. However, when I scroll down midway through the page, it disappears. I've tried adding position:fixed in the CSS, which does keep it at the top but it overlaps other elements. Can anyone assist me with this issue?

csshtmlbootstrap-4navbar

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

Creating a vertical scrollable content using FlexBox

Struggling to create a scrollable box using flex The Box element with the id=scroll is not behaving as expected, causing content overflow How do I set the Box to overflow=auto and enable scrolling for the content? Spending countless hours trying to unrav ...

cssreactjsflexboxmaterial-ui

Exploring the world of XML parsing with iText

I am curious to learn whether it is feasible to modify the font, color, and size while converting HTML to PDF using xmlWorker.parser. Thus far, I have successfully parsed the input as is, but now I am seeking ways to customize the font, size, color, and ...

htmlpdffontsxml-parsingitext

Executing an on-click event on a button in PHP

I've been developing a learning site that involves teachers, students, and different subjects. To organize the registration process, I decided to separate the teacher and student registration pages since they input data into different tables in the da ...

phphtmlcss

Retrieve detailed Paypal donation transaction information in HTML format with the donation button functionality integrated

I'm currently in the process of building a web application for a non-profit organization, which includes a Paypal Donation feature. I am using HTML5, CSS3, and jQuery to develop this application. I have successfully implemented the Donation button fro ...

jqueryhtmlcsspaypaltransactions

The header of the bootstrap table will now feature a new button for toggling the visibility of the filter control

I'm currently utilizing a bootstrap table with filter control, and I am looking to incorporate a button (icon) on each of the table headers in order to toggle the visibility of the filter control. Is there a method to achieve this? An example of a b ...

javascriptjqueryfilterbootstrap-4bootstrap-table

Achieving full screen height at 100% with the CSS property of display: table along with table-cell tag

I'm facing an issue with the layout of my page. In this example (http://jsfiddle.net/RR2Xc/2/), the footer is not positioned at the bottom as desired. If I force the footer to be at the bottom, it creates a gap between the sidebar and footer where the ...

csshtmlheightcss-tables

Trouble opening attached html file with Asp.net and Google Charts integration

I am facing an issue with my Asp.Net page that includes a grid and an image. The image is a Google Charts chart with a URL of approximately 1600 characters. To send this content as an email attachment, I created an .htm file containing the grid and the ima ...

asp.nethtmlgoogle-visualization

Using jQuery to apply a CSS border to an image within a textarea

Working with TinyIMCE, I am looking to incorporate a border around all images within the textarea whenever a user submits the form. $("form").submit(function() { var content = $("#edit-message1-value").val(); // Afterwards, I want to manipulate the cont ...

jqueryhtmlcsstextarea

Is it possible for me to generate HTML using JavaScript?

Below is the javascript code I have written, saved as create.js: var stuff = document.querySelector(".stuff"); var item = document.createElement('div'); item.className = 'item'; stuff.appendChild(item); This is the corresponding HT ...

javascripthtmlcssdom

The jQuery ajax request will only display the data in the HTML once

Hey there! I am facing an issue where, when I click on my button to make an ajax request, it works perfectly and displays the data on my select item. However, on clicking the button again, the data is fetched correctly but the select item shows the data t ...

javascriptjqueryhtmlajax

The functionality of my PHP code for email transmission is currently malfunctioning

I'm having trouble sending mail from my HTML form using PHP. I've uploaded the necessary files to my hosting server but the mail is still not being sent. Here is my HTML code: <!-- Form --> <form action="http://example.com/sendEmail.php ...

phphtmlemail

Achieving centered text alignment in a span using Bootstrap 5

I am facing an issue with a span in an input group that has a minimum width of 6rem. This is causing the text to not be centered, as spans typically adjust to the width of the text itself. .input-group-text { min-width: 6rem; } <link rel="stylesheet ...

htmlcssbootstrap-5

What is the protocol for displaying linear gradients that overlap?

My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward: body { background: #eac996; } .box { width: 100px; height: 100px; margin: 100px auto; padding: 20px; backgroun ...

csslinear-gradients

HTML script tag failing to load

As a beginner in using scripts in HTML, I'm currently following a tutorial that suggests loading the script after the body for certain reasons. In my own code, I found that I need to place the script both in the head section and after the body. Remov ...

javascripthtmljquery

Achieving responsive design using text font percentage instead of text images can be done by implementing the following code snippet provided below

When working with text in HTML, I encountered an issue where using percentages for width and height was not giving me the desired results. To work around this, I used images of text instead, but each image ended up either stretched or looking too small. H ...

htmlcss.netimagealignment

Having issues with implementing CSS3 animations on my webpage

I'm having trouble implementing a bouncing mouse animation on my website. The code works perfectly on another site, but on mine, it's not functioning at all. Here is the CSS code: .mouse { display: block; margin: 0 auto; text-alig ...

csscss-animations

Ways to implement the CSS on images with an ID such as img120 within a div that has a class of 'open'

<div class='cluster' id='12' 'style='width:350px;min-height:150px;border:4px solid #339966;'> <div class='image' style='width:150px;height:150px;border:2px solid black;float:left;margin-bottom: ...

htmlcss

Modifying properties through JavaScript is not possible

I created an HTML form and I'm trying to change the attributes of a div and a button but for some reason, it's not working <form> <button type='button' id='other'>Sub</button> <select id="prop"> &l ...

javascripthtml

Linking URLs in an Android TextView with the <a href> tag

When creating a TextView dynamically, I encountered an issue with setting the text as linkable. The desired text value was "Google". After referring to various resources on the internet and blogs, such as this one, I attempted different methods but did not ...

androidhtmlhyperlinktextview

Don't forget the last click you made

Looking for a way to style a link differently after it has been clicked and the user navigates away from the page? Check out this code snippet I've been using: $(document).ready(function(){ var url = document.URL; function contains(search, find) { ...

javascriptjqueryhtmlcss