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

Choose the first element of its type and disregard any elements nested within it

I need to change the color of only the first p element within a specific div. Using :first-child would work in a simple example, but in my project, there are multiple elements and more could be added in the future. I want to avoid using :first-child alto ...

htmlcss

The hovering of the mouse over a dropdown menu causes a division on the page to shift

Creating a website with a dropdown menu and slider division can be tricky. When hovering over the menu, the submenu displays but causes the slider division to shift down. Does anyone have suggestions on how to fix this issue? Below is the code: <html& ...

htmlcss

Can a hyperlink exist without a specified href attribute?

One scenario could be when I receive this specific code from a third-party source <a class="cs_import">Add contacts from your Address Book</a> Curiously, the link "Add contacts from your Address Book" does not redirect to any page as expected ...

javascripthtmlcss

Include a return or delete from the default IO statement

I am utilizing an intersection observer that alters the header's font-color and background-color based on the content intersecting with it. This change is determined by the presence of data-color and data-background attributes declared on the div/sect ...

javascripthtmlcssintersection-observer

Is there a way to hide a specific character within a span element as securely as a password input field using

Can I use CSS to mask a span character similar to an input type password? Are there any properties like type="password" for the span or a specific class in Bootstrap such as class="mask" that can achieve this effect? https://i.stack.imgur.com/b8WQ4.png ...

htmlcssbootstrap-4

Utilizing jquery and ajax to showcase a series of images prior to uploading them

I have been attempting to create a feature that allows for the preview of multiple images before uploading them to my website. Unfortunately, it's not working as expected and I am unable to identify any errors in the console. Below is the JavaScript c ...

javascriptjqueryhtml

javascript Why isn't the initial click registering?

In my table, users can select certain rows by using checkboxes. I have implemented some JavaScript functionality that allows them to select each checkbox individually and also use a "Select All" option. Additionally, there is code written to enable the use ...

javascriptjqueryhtmlcheckbox

Tips for placing a large image within a small div

I have an image with a ratio of 1920*1300 that I want to be displayed on any device the website is viewed and cover the entire div. Check out my code below: .carousel { width: 100vw; height: 80vh; position: relative; } .carousel a { width: 1 ...

htmlcssimage

Use a PHP form to send an email with HTML formatting, rather than plain text

I am facing an issue with sending emails from a web form. The received email needs to be displayed as HTML and not text. function createMailBodyLine ( $title, $value ) { $value = nl2br(htmlspecialchars($value)); return "<tr> ...

phphtmlhtmlspecialchars

Issue with Jquery .scroll method not triggering display:none functionality

Styling Using CSS #acc-close-all, #to-top { position: relative; left: 951px; width: 29px; height: 42px; margin-bottom: 2px; display:none; } #acc-close-all a, #to-top a { position: absolute; float: right; display: block ...

javascriptjqueryhtmlcss

The jQuery script automatically triggers submission on its own

Does anyone have an idea why the form auto-submits itself? I can't figure out why it's doing that. I'm using query parsley to validate the form in a modal. When a user opens the modal and starts typing in the text area, they must type at l ...

javascriptjqueryhtmlajax

Can you guide me on how to activate the pickadate.js calendar above the input field?

Encountering an issue with the Pickadate calendar. There seems to be a problem at the bottom of the page, please refer to the attachment for more details. My challenge is that I need to display the Pickadate calendar above the input field when the field is ...

csshtmlbootstrap-4pickadate

The art of CSS Absolute Positioning and the Science of Body Sc

I'm trying to position an absolute div in the bottom right corner of a page. .absolute{ position: absolute; right:0; bottom: 0; } While this code works, I've noticed that when scrolling the page, the right/bottom position is relative t ...

csscss-position

CSS effect() Practical duration

I have successfully implemented a CSS filter to blur an element, however, I am looking for a way to make the blur ease in smoothly. I'm not sure which css property controls this easing effect? Initially, I tried using transition: 1s; but that ended u ...

csscss-transitionscss-filters

Using PHP to create a loop that generates a multi-radio form: a step-by-step guide

Despite coding it this way, the multiple radio form is still not functioning as intended. I attempted to utilize fieldset, but to no avail. How can I rectify this issue? Could using various ID's for fieldset assist in creating multiple forms correctly ...

phphtmlformsfor-loopradio-button

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

I'm looking to retrieve the max-width value in px from CSS for use in a JavaScript code. The challenge is that this value might be specified in different units in the CSS file. Any suggestions on how to achieve this using JavaScript? const element = ...

javascripthtmlcss

Check the validity of the data by logging into another website

I've run into a bit of a problem while working on my website. Here's a brief explanation (using fake addresses), I have a website, www.website1.com, with lots of well-coded elements. You can log in to this website using www.website2.com. So whe ...

phphtmlcurl

Tips for customizing the selected and hover color of ListItem in Material UI

Having trouble getting the 'selected' or 'hover' colors to work for the ListItem component. I've tried setting its classes like this: <ListItem selected button key="home" classes={{ selected: classes.listItemSelected } ...

cssreactjsmaterial-ui

Capturing HTML elements based on their class names using regular expressions

In my Python script, I am attempting to extract both the element and class names for all elements within an HTML file. So far, I have successfully retrieved all class names using the code snippet below. This method is crucial as I will be processing numero ...

pythonhtmlregex

I encountered an issue while attempting to link my project to a database. An error popped up stating that the name 'textbox' does not exist in the current context

I encountered an error when trying to connect my project to a live database. The error message stated: the name ‘textbox’ does not exist in the current context. How can I resolve this issue? Below is the aspx.cs code that I used for the connection, wh ...

htmlcsswebforms