Creating a dropdown menu with a blur effect using CSS

I attempted to match the opacity and blur effect of my dropdown menu with that of my navbar. While the opacity adjustment worked correctly, the blur effect did not apply as expected.

I've heard that I need to utilize a pseudo-class to achieve this, but I'm unsure of how to implement it.

.navbar {
        background-color: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(3px);
      }
      .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(3px);
      }
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caa8a5a5beb9beb8abba8affe4f9e4fae7aba6baa2abf9">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d76717670637242372c312c322f636e726a6331">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg fixed-top" style="">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</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">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown link
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <h1>Example Text</h1>
     <h1>Example Text</h1>
      <h1>Example Text</h1>
       <h1>Example Text</h1>
        <h1>Example Text</h1>
  </body>

The dropdown menu does not exhibit the desired blur effect despite using the !important declaration as shown above.

cssdropdownnavbarbootstrap-5blur

Answer №1

It seems like you are aiming for the following output.

.navbar {
        background-color: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(3px);
      }
      .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(0);
      }
<link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f021f011c505d41595002">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464110a170a14094548544c4517">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg fixed-top" style="">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</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">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown link
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <h1>Example Text</h1>
     <h1>Example Text</h1>
      <h1>Example Text</h1>
       <h1>Example Text</h1>
        <h1>Example Text</h1>
  </body>

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 multi-click navigation menu

I'm relatively new to JavaScript and I've been struggling with using multiple onClick attributes. While I have some code that works, I feel like there might be a simpler and cleaner solution to my problem. What I'm trying to achieve is a na ...

javascriptjqueryhtmlcssnavigationbar

Vue 3 has a known issue where scoped styles do not get applied correctly within the content of a <slot> element

Utilizing the Oruga and Storybook libraries for creating Vue 3 components. The code in the Vue file looks like this: <template> <o-radio v-bind="$props" v-model="model"> <slot /> </o-radio> </template ...

javascriptcssvue.jsvuejs3

Enhancing JQuery UI Accordion with simple ICONS

Is it necessary to use the Jquery CSS file for adding icons, or is there an alternative method? I'm hoping I can avoid using it as I am working within Wordpress and enqueuing the Jquery CSS seems like a complex task for me. Apologies for the basic q ...

jquerycssuser-interfacejquery-uiaccordion

Ways to center a vertically aligned SVG in relation to text using Bootstrap

After experimenting with bootstrap, I have encountered an issue where I cannot vertically center an inline SVG relative to text. Below is a simplified example showcasing this problem: <!DOCTYPE html> <html> <head> <link rel=& ...

htmlcsstwitter-bootstrapbootstrap-4

What is the main focus of the active view in MVC2?

So, you can find my website at www.kristianbak.com. I've created a CSS class named activebutton, but I want it to dynamically change when another view is active. Right now, it's statically coded in the HTML (sitemaster). Does anyone have a clev ...

asp.netcssasp.net-mvc-2navigation

Utilizing separate JavaScript files in Bootstrap 5: A guide to implementation

I am currently using Bootstrap, but I am looking to decrease the size of the Javascript files being used. My main requirements are dropdown/collapse and occasionally carousel functionalities, so I only want to include those specific scripts. Within the "d ...

javascriptbootstrap-5

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascriptjqueryhtmlcss

Tips for including a new class in an HTML element

My goal is to add a specific class to an HTML tag, if that tag exists. This is the code I have attempted: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>index</title> <style> ...

javascriptjqueryhtmlcss

Display a div when hovering over another div

I have a menu that looks like this: https://i.sstatic.net/WqN33.png and I want to create a hover effect where another div shows up over each item, similar to this: https://i.sstatic.net/JRaoF.png However, I can't seem to figure out how to implemen ...

javascripthtmlcssvue.js

Is it possible for me to utilize a type of CSS variables?

Looking to organize all the CSS code on my website in a specific manner. I want to define the type with details such as size, weight, and color. For example: <h1 bold blue>Hello world</h1 blue bold> So essentially, the CSS file will include: ...

htmlcss

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png I've tried several solutions, the latest of which involves the following CSS... @me ...

javascripthtmlcsspdfpage-break

I'm interested in implementing a cooldown feature on my button, but I'm not quite sure how to go about

Working on a React.Js website and looking to improve the Contact Me page by adding a cooldown to the button. Unfortunately, I haven't shared all the code here but feel free to reach out on Discord: uvejs#5162 for more details. import "./contactpa ...

htmlcssreactjs

Begin by opening a single div for each instance

I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...

javascripthtmlcss

Tips for creating responsive content within an iframe

I have inserted a player from a website that streams a channel using an iframe. While I have managed to make the iframe responsive, the video player inside the iframe does not adapt to changes in viewport size. Despite trying various solutions found online ...

javascriptjqueryhtmlcssiframe

Using jQuery to dynamically disable a textbox when a checkbox is checked

I'm trying to implement a functionality where a textbox becomes disabled and changes its background color when a user unchecks a checkbox. Conversely, if the user checks the checkbox, the textbox should become editable and change its background color ...

jqueryhtmlcss

Is it possible to utilize the Linear-gradient property for creating a vertical background color effect?

I'm currently attempting the following: body { height:100%; background: -moz-linear-gradient(left, #DB2B39 50%, #2B303A 50%); background: -webkit-linear-gradient(left, #DB2B39 50%,#2B303A 50%); background: linear-gradient(to right, #D ...

htmlcssbackground-color

CSS - Guidelines for Targeting Multiple Elements

My CSS code includes several commands that target similar elements, but the resulting design appears messy. I am seeking advice on a more effective way to select these elements in a conventional manner. Despite consulting documentation, I have resorted to ...

htmlcsscss-selectorsconventions

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

htmlcss

Is concealing a button an effective strategy?

Recently, I decided to design a login form for my website. To quickly style the form, I opted to use Bootstrap through CDN. While working on the form, I encountered an issue with the button size as the device width changed. Initially, I applied the classes ...

htmlcsstwitter-bootstrapfrontend

When the width of the screen is less than 992 pixels, my div will be hidden

I have been working with the bootstrap4 layout, and I noticed that when the screen width is less than 992px, the yellow-div is overlapping the brown-div. Can someone explain why this is happening and suggest a solution? Below is the code snippet: .head ...

htmlcssresponsive-designbootstrap-4