Transparent static navbar displayed above header image

Scenario

I managed to develop a transparent navbar that is superimposed on top of a header image with an SVG curve attached to it.

To create the transparent navbar, I modified some classes associated with it by removing bg-light.

By adding the class fixed-top, I placed the navbar on top of the header image effectively.

Challenge

The use of fixed-top makes the navbar appear above the header image, but as the user scrolls down, it sticks like a frozen row in Excel obstructing other content. I desire the transparent navbar to stay static and always display at the page's top. What modifications are required to achieve this?

Reference CodePen https://codepen.io/lowdowner/pen/gOdGVzx

/* Custom CSS */

.svg-container {
  position: absolute;
  bottom: 0;
  height: 0;
  width: 100%;
  padding-bottom: calc(100% * 45 / 1440);
}


/* PAGE SETUP */

header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 650px;
  background-image: url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=53b711edbf0f887b5de376f91052d8f8&auto=format&fit=crop&w=1350&q=80');
  background-size: cover;
  background-position: center;
}

#title {
  font-family: 'Knewave', cursive;
  font-size: 8rem;
  color: #fff;
  letter-spacing: 16px;
}

h1,
h2 {
  text-transform: uppercase;
}

h1,
h2 {
  margin-top: 1.25em;
  font-size: 3rem;
}

h1,
h2,
p {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

h2,
a {
  color: #3086B9;
}

a {
  text-decoration: none;
}

.navbar {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  z-index: 9999;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e4e4fff8fff9eafbcbbea5b8a5bba6eae7fbe3eaba">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">


<!-- Wave Start -->
<header>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

  <h1 id="title">Waves</h1>

  <div class="svg-container">
    <svg id="wave" viewBox="0 0 1440 45" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 39C0 39 291.625 0.0315932 479.5 0 667.764 -0.0316586 771.789 34.5337 960 39 1147.5 43.4495 1440 23 1440 23V45H0V39Z" fill="white"/>
            </svg>
  </div>


</header>
<!-- Wave End -->

<h1>LOREM IPSUM</h1>
<h2>LOREUM IPSUM</h2>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM </p>

<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM </p>

<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM </p>

htmlcssnavbarbootstrap-5

Answer №1

Wanting absolute positioning instead of fixed? While the fixed-top class offers some desired features, you can achieve what you need by overriding it with position-absolute.

TIP: Avoid using alpha versions for production sites - they are riskier than beta versions. Stick to stable versions and utilize the official CDN.

/* WAVE CSS */

.svg-container {
  position: absolute;
  bottom: 0;
  height: 0;
  width: 100%;
  padding-bottom: calc(100% * 45 / 1440);
}


/* PAGE SET UP */

header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 650px;
  background-image: url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=53b711edbf0f887b5de376f91052d8f8&auto=format&fit=crop&w=1350&q=80');
  background-size: cover;
  background-position: center;
}

#title {
  font-family: 'Knewave', cursive;
  font-size: 8rem;
  color: #fff;
  letter-spacing: 16px;
}

h1,
h2 {
  text-transform: uppercase;
}

h1,
h2 {
  margin-top: 1.25em;
  font-size: 3rem;
}

h1,
h2,
p {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

h2,
a {
  color: #3086B9;
}

a {
  text-decoration: none;
}

.navbar {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  z-index: 9999;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce1fce2ffb3bea2bab3e3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<header>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top position-absolute">
    <div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse" id="SupportedContent">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

  <h1 id="title">Waves</h1>

  <div class="svg-container">
    <svg id="wave" viewBox="0 0 1440 45" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 39C0 39 291.625 0.0315932 479.5 0C667.764 -0.0316586 771.789 34.5337 960 39C1147.5 43.4495 1440 23 1440 23V45H0V39Z" fill="white"/>
    </svg>
  </div>
</header>

<h1>LOREM IPSUM</h1>
<h2>LOREUM IPSUM</h2>
<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM </p>

<p>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM INCIDUNT LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM </p>

<p>LOREM IPSUM DOLOR SIT AMET CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT DUYS AUTEM VELO IREURE! IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATURE ATSUNC MANE ALIQUAM QUAE MEDES ADO IPSCING ID EST OLABORUM.</p>

<p>SUFFIK HOKY DEOH END BURN UT LAY YES BE SIKE TODY FLORDAR SHADARRN MIZANDFLAK SOMED GALLA PEHKACIBAL KANAMISHOK SOFFERTUL RIFULAR VOHNIVUKADER MIJAHAKOW BAZITOR PINOBOL ZIZINDHPON DIGNESS HUDAFOLT SIPURTUN!</p>

<p>EPPOVERT KAWARPALL NEFSHEUFT QERMANKALA IFERWEITYST JOPAQOTUNELL RIPPERBAD HIATUSOLICO OPENTRILLY EVITTINGEND EBSIDES ONULLIGARDG POPINETER VAVIDWISE ASPARENTUSH DIQUANELAY CRYDRILT MORPHOIDISK RAILGANON IKITHODOV FULLROTELIX ROFUZORY</p>

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

Organize object properties based on shared values using JavaScript

Check out the JavaScript code snippet below by visiting this fiddle. var name = ["Ted", "Sarah", "Nancy", "Ted", "Sarah", "Nancy"]; var prodID = [111, 222, 222, 222, 222, 222]; var prodName = ["milk", "juice", "juice", "juice", "juice", "juice ...

javascriptjqueryhtmlarrays

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

Is there a more efficient method for cleaning the innerHTML of an element that is constantly changing? I created a function to clean the containers, but I'm not sure if it's the most efficient approach. While it works with the specified containe ...

javascriptjqueryhtml

personalized bootswatch theme based on light or dark mode

I am currently using a bootswatch theme that incorporates both light and dark color modes from bootstrap 5.3. My goal is to implement a sass build where I can define two different primary colors, one for the light mode and another for the dark mode. Howev ...

sassbootstrap-5bootswatch

What is the best way to include CSS in a CodeIgniter project?

I am facing an issue with loading a CSS file in Codeigniter. It seems like there might be something wrong with my code. Can someone help me understand how to properly load a CSS file in Codeigniter and possibly identify any errors in my current code? < ...

phphtmlcsscodeigniter

Crop and resize a portion of an image using CSS

Is there a way to display just part of an image on a webpage and scale that specific area either larger or smaller using CSS? A common method is by using the following code: $("#myDiv").css({ width: 100, height: 100, background: "url('myurl.jpg ...

htmlcssimage-scalingimage-extraction

Navigating to a specific div within a container with vertical overflow in an Angular application

I am working on an angular application where I have a left column with a scrollable div that has overflow-y: auto;, and a right column with bookmark links that jump to sections within the scrollable container. I am currently facing two challenges: 1 - Co ...

htmlangulartypescript

Tips for reducing the impact on performance caused by cookie consent code

Experimenting with basic HTML to analyze the impact of cookie consent code. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="determine page l ...

htmlcsspagespeedgoogle-pagespeedcookieconsent

What is the process of incorporating HTML into a jQuery program in order to immerse the world in an element?

I am looking to utilize HTML with the value in a checkbox, After adding a shortcode: <label class="HCheck">(this is val 1 )</label> and incorporating jQuery to change it to: <label class="HCheck">(this is val 1 ) ...

javascripthtmljqueryloopsdom

Modifications to the selected input do not impact the current state of the model

Declare 3 select inputs with hierarchical data to be chosen: <select data-ng-model="current.manufacturer" data-ng-options="c.name for c in manufactures"></select> <select data-ng-model="current.mark" data-ng-options="c.name for c in current ...

javascripthtmlangularjsselect

Ways to enable automatic scrolling of a page as the content expands (Utilizing collapsible elements)

For a recent project I've been working on, I decided to include 4 collapsible text boxes. However, I encountered an issue where opening content1 would expand and push down content2-4, requiring the user to manually scroll to view the remaining collaps ...

javascripthtmlcss

How can I compare the current page URL with the navigation bar?

Looking to compare the URL of a current page to an element in the navigation bar using jQuery. Started by assigning the current URL to a variable: var currentPage = window.location.href; Then utilized an .each function to loop through each item in the n ...

javascriptjquerycss

Having trouble clicking on SubMenu with selenium web driver

Currently, I am looking into automating a UI application. In this application, there is a menu that displays sub-menus upon hovering the mouse over it. However, I am facing an issue where I am unable to click on the items within the sub-menu. Here is the ...

htmlcssselenium

CSS/SCSS/JS: Adjusting header height dynamically while keeping it fixed at the

Check out my Codepen demo here: https://codepen.io/nickfindley/pen/dJqMQW I am seeking to replicate the current behavior of the page without specifying a fixed height for the header. The goal is to make the header adjust dynamically based on the content, ...

javascriptcssfixed

Is there a way to incorporate a base64 encoded image from a text file into an HTML image?

I have several images stored as base64 blobs in a remote location. Let's focus on one specific image: llorkcir.txt data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhASEBAQDxAQDw8QEA8PEA8PDw0PFRIWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMt ...

javascripthtmlblobvercel

Modifying the Collapse Direction of Navigation in Bootstrap 4

Is it possible to change the collapse direction of the Bootstrap 4 navbar from 'top to bottom' to 'right to left'? Here is the code snippet I am currently using: <nav class="navbar navbar-light bg-faded"> <button class="na ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Send the user to a specified destination

Currently, I am working on creating a form that allows users to input a location and have the page redirect to that location after submission. However, I am facing difficulty in determining how to set the value for action="" when I do not know what the loc ...

javascriptphphtmlweb

The attribute selector is malfunctioning

Currently, I am attempting to target img tags based on the alt attribute in order to correctly load a background-image on mobile devices. The issue I am encountering is that regardless of the combination of attribute selectors I use, it does not seem to w ...

imagecsscss-selectorsselector

Utilizing Scrollify for seamless section scrolling with overflow effects

I have been experimenting with the Scrollify script (https://github.com/lukehaas/Scrollify) and facing an issue where my sections are longer than the user's screen, requiring them to scroll down to view all content. However, Scrollify doesn't al ...

javascriptjqueryhtmlscrolljquery-scrollify

A guide on updating the appearance of a list of comma-separated tags using HTML, CSS, and jQuery

Is there a way to replicate the functionality of the tag section on this website for creating question entries? How can this be achieved? ...

jqueryhtmlcss

What methods are available to fill a canvas with shapes other than circles?

My goal is to fill the canvas with a black color. The code I have used for this purpose is as follows: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle='rgba(0,0,0,0.1)'; ctx.fillRect(0,0,c.width,c.height) ...

javascripthtmlcanvashtml5-canvasmedia