Bootstrap's hidden navigation bar feature

I noticed that my navbar changes from transparent to opaque when scrolling. I am trying to achieve a similar effect like the one in this example:

https://i.sstatic.net/00uPM.png

Initially, my navbar looks like this:

https://i.sstatic.net/iMyYL.png

As you can see, it has a light border and the font is not white. However, I want it to look more like the example I provided above. Can someone please assist me with achieving this?

Here is the code I have implemented so far:

<nav class="navbar navbar-inverse navbar-expand-lg navbar-dark fixed-top shadow-lg">
  <div class="container">
      <a class="navbar-brand" href="#">
          <img src="" class="d-inline-block align-top" alt="">
          </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
              <li class="nav-item active">
                  <a class="nav-link p-2 text-dark" href="/">Lorem <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link p-2 text-dark" href="/uns">Lorem <span
                          class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle p-2 text-dark" href="#" id="navbarDropdownMenuLink"
                      role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Produkte
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="#winkelstufe">Lorem</a>
                      <a class="dropdown-item" href="#auftritt">Lorem</a>
                      <a class="dropdown-item" href="#volltritt">Lorem</a>
                  </div>
              </li>
              <li class="nav-item">
                  <a class="nav-link p-2 text-dark" href="/galerie">Lorem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link p-2 text-dark" href="/jobs">Lorem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link p-2 text-dark" href="#contact2">Lorem</a>
              </li>
          </ul>
      </div>
  </div>

Here is my CSS:

nav.navbar{
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.navbar-inverse {
   /* background-color: #222;
   border-color: #080808; */
}

nav.navbar.transparent {
 background-color:white;
}

.navbar {
  background: transparent;
  font-size: 1rem;
}

And here is my JavaScript:

$(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
      $('nav').addClass('transparent');
    } else {
      $('nav').removeClass('transparent');
    }
  });

Answer №1

To improve the appearance of your navbar, consider removing the shadow-lg class and applying it dynamically based on scroll events instead of having it applied all the time.

Also, be mindful of text color; the navbar-dark class on your nav makes the text white, so ensure to adjust this style when adding the .transparent class.

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('transparent');
  } else {
    $('nav').removeClass('transparent');
  }
});
body {
  background-color: grey !important;
}

nav.navbar {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.nav-item .nav-link {
  color: white;
}

.navbar-inverse {
  /* background-color: #222;
   border-color: #080808; */
}

nav.navbar.transparent {
  background-color: white;
  box-shadow: 0px 0px 25px #000;
}

nav.navbar.transparent .nav-link {
  color: black;
}

.navbar {
  background: transparent;
  font-size: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-expand fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="" class="d-inline-block align-top" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
        <li class="nav-item active">
          <a class="nav-link p-2" href="/">Lorem <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="/uns">Lorem <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle p-2" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Produkte
                  </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#winkelstufe">Lorem</a>
            <a class="dropdown-item" href="#auftritt">Lorem</a>
            <a class="dropdown-item" href="#volltritt">Lorem</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="/galerie">Lorem</a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="/jobs">Lorem</a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="#contact2">Lorem</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<p class="mt-5">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores illum provident iure doloribus autem veniam aperiam nam atque iste quia, magni sapiente, sunt, culpa minima et nostrum dolor eveniet? Saepe velit corporis quaerat laudantium esse cumque
  nobis in. Dolores accusamus laudantium non neque veniam cupiditate labore corrupti voluptatibus quo cumque repellendus fugit doloribus, recusandae maiores accusantium omnis aut tempore. Reprehenderit neque officiis deleniti laudantium reiciendis recusandae,
  adipisci, dolores officia at dolorem a. Non consectetur alias velit modi aspernatur voluptatem nesciunt optio enim. Reiciendis nemo odio, commodi eos iure minima ullam nulla dicta dolorum aspernatur. Iusto animi quasi molestias? Repellendus, illum,
  amet, aliquam suscipit dolor voluptates facilis libero odio hic eos neque magni esse soluta quam adipisci. Eligendi explicabo similique recusandae ipsum praesentium excepturi enim, placeat eum libero! Tempore labore officia optio accusantium fugiat
  voluptate maxime expedita, dolores perferendis eos numquam delectus at odit cupiditate atque corporis rem reprehenderit consequatur velit.</p>
<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores illum provident iure doloribus autem veniam aperiam nam atque iste quia, magni sapiente, sunt, culpa minima et nostrum dolor eveniet? Saepe velit corporis quaerat laudantium esse cumque
  nobis in. Dolores accusamus laudantium non neque veniam cupiditate labore corrupti voluptatibus quo cumque repellendus fugit doloribus, recusandae maiores accusantium omnis aut tempore. Reprehenderit neque officiis deleniti laudantium reiciendis recusandae,
  adipisci, dolores officia at dolorem a. Non consectetur alias velit modi aspernatur voluptatem nesciunt optio enim. Reiciendis nemo odio, commodi eos iure minima ullam nulla dicta dolorum aspernatur. Iusto animi quasi molestias? Repellendus, illum,
  amet, aliquam suscipit dolor voluptates facilis libero odio hic eos neque magni esse soluta quam adipisci. Eligendi explicabo similique recusandae ipsum praesentium excepturi enim, placeat eum libero! Tempore labore officia optio accusantium fugiat
  voluptate maxime expedita, dolores perferendis eos numquam delectus at odit cupiditate atque corporis rem reprehenderit consequatur velit.</p>
<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores illum provident iure doloribus autem veniam aperiam nam atque iste quia, magni sapiente, sunt, culpa minima et nostrum dolor eveniet? Saepe velit corporis quaerat laudantium esse cumque
  nobis in. Dolores accusamus laudantium non neque veniam cupiditate labore corrupti voluptatibus quo cumque repellendus fugit doloribus, recusandae maiores accusantium omnis aut tempore. Reprehenderit neque officiis deleniti laudantium reiciendis recusandae,
  adipisci, dolores officia at dolorem a. Non consectetur alias velit modi aspernatur voluptatem nesciunt optio enim. Reiciendis nemo odio, commodi eos iure minima ullam nulla dicta dolorum aspernatur. Iusto animi quasi molestias? Repellendus, illum,
  amet, aliquam suscipit dolor voluptates facilis libero odio hic eos neque magni esse soluta quam adipisci. Eligendi explicabo similique recusandae ipsum praesentium excepturi enim, placeat eum libero! Tempore labore officia optio accusantium fugiat
  voluptate maxime expedita, dolores perferendis eos numquam delectus at odit cupiditate atque corporis rem reprehenderit consequatur velit.</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

Save picture in localStorage

Hello, I am currently working on a page where I need to retrieve an image from a JSON file and store it locally. Below is the code I have been using: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min. ...

React Issue: Footer not staying attached at the bottom of the page

I'm currently developing a website with react, but I'm struggling to keep the footer at the bottom. When there isn't enough content, the footer ends up right after the content instead of staying at the bottom. I've tried various solutio ...

Using Javascript to dynamically add form fields based on the selection made in a combo box

I am in the process of creating an information submission page for a website, where various fields will need to be dynamically generated based on the selection made in a combo box. For example, if the user selects "2" from the combo box, then two addition ...

Determine the placement of the body with CSS styling

Here is the code snippet from my website: body { background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .centered { /* Center entire body */ display: flex; ...

There seems to be an issue with the functionality of the dropdown option in my HTML when integrated with my PHP code. I have implemented POST as the retrieval method, but unfortunately, it is resulting in

Is the POST method not appropriate for gathering information about the Employees? I previously used this form with just name, email, and phone fields, and it worked fine. As a PHP beginner, I'm feeling a bit overwhelmed. I trimmed down the form to av ...

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

Open the window by using the `Window.open` method, then find and

Is there a way to open a document, not in a new window but on the same page using JavaScript.Window.Open()? Could it be possible to display the document within a specific div element that is obtained with getElementById? For example: document.getElementB ...

Displaying the division of shares in an HTML table using jQuery to add a new row

I recently worked on transposing a table, adding classes and ids to specific HTML tags, and converting numbers with commas into integers. Now, I am attempting to calculate the percentage share and display it in a new row. Here is the original table for re ...

Embed a data entry point into an existing picture

Looking for assistance inserting a field within an image for users to enter their email. Can someone provide the HTML code for this? Appreciate your help! ...

What is the best way to implement form fields that have varying validation patterns based on different conditions?

Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US nu ...

Using an ellipsis in a hyperlink within a list item conceals the bullet points of the list

When I apply an ellipsis to the text within a list element that has disc bullet points, it hides the bullet point itself. I discovered that applying overflow: hidden to the list will also hide the bullet point. Moving this rule to the anchor within the li ...

Div's external dimension not being computed

I am attempting to calculate the overall height of the div content in order to expand the sticky-container and create the appearance that the image is tracking the user. Unfortunately, using outerHeight does not seem to be effective for some reason. While ...

How come Selenium is stopping me from extracting text content from the "ul" and "li" elements?

This piece of code represents my work: from selenium import webdriver from selenium.webdriver.common.keys import Keys # For being able to input key presses import time ...

What is the best way to choose the initial p tag from an HTML document encoded as a string?

When retrieving data from a headless CMS, the content is often returned as a string format like this: <div> <p>1st p tag</p> <p>2nd p tag</p> </div> To target and select the first paragraph tag (p), you can extract ...

Utilize information stored in a database to automatically navigate to a different webpage

I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...

Enable the script tag with the type "module" only under certain conditions

Attempting to dynamically enable script tags in HTML using the code below does not yield the expected results. function loadScript() { document.querySelectorAll('script[type="text/skip-hydration"]').forEach((script) => { script ...

Tips for collapsing a child accordion when the parent accordion is collapsed?

Here is the code I have for a functional parent/child accordion div setup: <div class="accordion"> <h3>Part 1</h3> <div class="accordion"> <h3>Sub-Div1</h3> <div> <p>This ...

Developer server experiencing CSS issues in Django admin interface

Experiencing some odd issues with the Django admin application here. I've got everything up and running on the manage.py runserver development server, but for some reason it looks like this: This obviously isn't what I want, so I'm trying t ...

Creating a Form in a Popup with Bootstrap

I have implemented Bootstrap on my website. Check it out at: hubb.tekkkz.com I am facing an issue where, when clicking on the login/register button on the right, the modal pops up. However, the user input elements within the modal are not taking up the ful ...

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed? I attempted to rem ...