Achieving a seamless integration of a navbar and video in Bootstrap 5.3: tips and tricks

I'm updating a website design using Bootstrap and I want to create a navbar with a video playing in the background.

To ensure that the navbar stays fixed at the top while scrolling, I made it sticky.

After testing various methods, I managed to position the video behind the navbar by setting its position: absolute.

However, a new issue arose when I tried adding more content after the navbar - everything appeared beneath the video instead of above it.

To resolve this problem, I removed the position: absolute from the video and placed the navbar before the video element.

Despite my efforts, I've been unable to make it work correctly. Can someone with more experience in Bootstrap help me out?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec2dec3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- SECTION NAVBAR -->
<nav class="navbar navbar-expand-md sticky-top" style="background: none; transition: 1s;" id="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="https://via.placeholder.com/80" alt="Top Life" style="width: 40%; height: auto;">
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" id="nav-link1" href="#">Servizi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nav-link2" href="#">Tecnologia</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nav-link3" href="#">Immonbili</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nav-link4" href="#">News</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nav-link5" href="#">Identità</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nav-link6" href="#">Contatti</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="nav-link-dropdown">
            <ion-icon name="globe-outline"></ion-icon>
          </a>

          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Italiano</a></li>
            <li><a class="dropdown-item" href="#">English</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- SECTION VIDEO -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
        <source src="/img/0314_compressed.mp4" type="video/mp4">
    </video>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c100c11">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

The desired outcome should resemble something like the image linked below:

https://i.sstatic.net/2RKd1.jpg

htmlcssbootstrap-5

Answer №1

Within the Nav element, include the following:

style=position:"fixed";
background:"transparent";

By implementing these styles, the navbar will be fixed at the top with a transparent background, allowing the video to serve as the backdrop for content.

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

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...

javascriptphpjqueryhtml

Receive the height from the parent element using the box-sizing property set to border-box

Let's talk about a CSS challenge. .parent{box-sizing: border-box; height: 60px; border: 1px solid green;} The child div has its own styling: .child{height:inherit;background: red} Here is the code snippet: ...

css

Updating Button Text with PHP on WooCommerce

Hi there, I'm trying to find a way to translate a button in my WooCommerce store without using LocoTranslate or any other tools. Is there a PHP function that can help me change the button text without needing an ID? If you want to take a look at the ...

phpcssbuttonwoocommerce

What is the best way to split the children of a parent div into four distinct styling regions using the nth-child selector?

Imagine having a square parent container with 100 child elements of equal sizes, as illustrated below. How can you use the :nth-child selector to target and style the children in the top-left, bottom-left, top-right, and bottom-right corners separately? ...

csssassresponsive-designcss-selectorsless

Concealing table columns using JavaScript - adapt layout on the fly

I am currently implementing a responsive design feature on my website, where I need to hide certain columns of a table when the viewport size decreases beyond a specific point. Initially, I tried using .style.visibility = "collapse" for all <tr> elem ...

javascripthtmlcssresponsive-design

Navigate to items within a content block with a set height

I have a <div> that has a fixed height and overflow-y: scroll. Inside this div, there is mostly a <p> tag containing a long text with some highlighting (spans with background-color and a numbered id attribute). Just to note, this is an HTML5 a ...

javascriptangularjshtml

methods for detaching event listener from bootstrap carousel indicator elements

I am currently utilizing the bootstrap5 carousel feature and I am seeking a way to trigger a custom event when either the previous or next indicators are clicked. My goal is to stop the default bootstrap event from being triggered, however my attempts at v ...

javascriptbootstrap-5event-listenerbootstrap-carouselremoveeventlistener

Retrieve the current width and height of an image after the maximum width and height constraints have been applied

Check out this example The HTML: <div class="container"> <img src="http://placehold.it/500x500" alt="500x500" /> </div> <div class="container"> <img src="http://placehold.it/100x500" alt="100x500" /> </div> < ...

jqueryhtmlcss

Troubleshooting: CSS causing images to not show up on

Struggling with a CSS issue, I can't seem to solve it. My images are not showing up on the webpage even though the URLs are correct and the HTML is properly written. There is no specific styling applied to the images, and the only styling for the ima ...

htmlcssimage

Personalize the color and icon of the checkbox marks in sapui5

I'm trying to customize the color of the tick on a UI5 checkbox. After inspecting the CSS, I noticed that it can be modified using the ::before selector: https://i.sstatic.net/2IMc4.png To target the checkbox, I added a class called .accept and defi ...

csscheckboxsapui5

Are Bootstrap classes like "row row-md" or "row row-cols" compatible with images?

I'm having an issue where the images are not displaying properly. When I try replacing the image line with something like <h1></h1>, it works just fine. Why is this not working with images? I also attempted using div class="col col-lg ...

htmlcssbootstrap-5

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

javascripthtml

Formula for full width skew in three adjacent divs using SkewX() function

.container { height: 500px; width: 500px; position: relative; background: black; } .box { transform: skewX(20deg); width: 33%; height: 100%; position: absolute; } .first-box { background: purple; left: 0; } .second-box { background ...

htmlcsscss-transformsskew

The div containers are unable to be positioned side by side

Hey there, I'm having trouble with my coding right now. (I'm not sure if you can see it, but the code is creating a div - frustrating). Here's an image of the code: https://i.sstatic.net/j1yW1.png No matter what code I try to use to align t ...

csshtml

Enhancing File Uploads with Vuetify

For my Vue.js project, I am attempting to upload a file using Vuetify and then store that uploaded file in my data object. This is the HTML code: <input id="file-upload" type="file" @change="onFileChange"> Within my methods section, I have the fol ...

htmlvue.jsfile-uploadvuetify.js

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

javascriptjquerycssimage

Is there a way to convert an HTML string into an HTML DOM without the need for scripts or images to

Upon receiving an HTML document as a string from the server via an Ajax call, I now need to modify certain parts of it and send it back to the server. This involves altering attributes and values (such as style="", src="", href="") and changing innerHTML e ...

jqueryhtmlxmlparsingdom

Trouble with Showing Bootstrap 5 Icon

My current project involves creating a website using Bootstrap 5 icons, but I'm encountering an issue where the icon is not displaying correctly. The expected appearance should be like this [![Example1][1]][1], but it actually looks like this [![Examp ...

htmlcssvisual-studiofrontendbootstrap-5

Click to Resize Window with the Same Dimensions

I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...

javascripthtmlcss

Is it possible to adjust an inline CSS style upon clicking a link?

I currently have a form that is hidden using inline styling style="display: none;" Is there a way to dynamically update this style to style="display: inline;" once a specific link on the page is clicked? ...

htmlcssstyles