Fuzzy backdrop for a dynamic navigation bar

Is there a way to achieve a blurred background on a bootstrap 4 navbar?

I've attempted using the CSS blur filter, but it ends up blurring all the content within the div as well. Some people have resorted to using SVG to blur whatever is behind the div, similar to photoshop masks, but this doesn't work for me since I need a fixed-top navbar that scrolls with the browser throughout the entire page.

Therefore, I am looking for a CSS effect that can be applied to this navbar to give the appearance of blurring whatever is behind it.

{# Navbar #}
    <nav id="home-navbar" class="navbar fixed-top navbar-expand-lg navbar-light mx-0 mx-md-auto" style="background-color: #ffffffcc; z-index: 3; max-width: 1140px;">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand mx-auto" href="#"><img src="{{ asset('img/logo-menu.png', 'theme') }}" style="max-height: 66px;"></a>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav mx-auto my-4 my-lg-0" style="padding: 0;">
                <a class="nav-item nav-link" href="#">{{ l('hotel') }}</a>
                <a class="nav-item nav-link" href="#"</a>
                <a class="nav-item nav-link" href="#">{{ l('restaurantes') }}</a>
                <a class="nav-item nav-link" href="#">{{ l('galeria') }}</a>
                <a class="nav-item nav-link" href="#">{{ l('promocoes') }}</a>
                <a class="nav-item nav-link" href="#">{{ l('contato') }}</a>
            </div>
        </div>
    </nav>

Answer №1

My solution looks like this:

.nav-bar-class-name:before {
   background-image: url('http://example.com');

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Simply place the image and blur effect inside a :before pseudo-element, and carry on with the rest of your nav-bar styling as usual.

.nav-bar-class-name {
    example: example;
}

Here's an alternative solution that works:

Due to Bootstrap's limitations, the previous solution may not be effective. Here's a workaround without using JS:

HTML:

<nav class="nav-bar-blur">
</nav>
<nav class="navbar navbar-default">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>

CSS:

.nav-bar-blur {
    background-image: url('https://www.fillmurray.com/1500/1500');
    width: 100%;
    height: 70px;

    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.navbar {
    height: 70px;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
}

Check out my CodePen to see this solution in action. Essentially, the only way to achieve this effect is by having two overlapping "navbars".

Answer №2

You can achieve this effect by utilizing the backdrop-filter CSS property.

Here is an example of how to implement this:

<nav class="blurred-navbar">
  <content/>
</nav>

And the corresponding CSS:

.blurred-navbar {
  backdrop-filter: blur(8px);
}

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

Display the text area when the "Yes" radio button is clicked, while it remains hidden either by default or when the "No" radio button is selected

I am currently working on an html code and I am looking for a way to use java script in order to create a text area box only when the "Yes" radio button is selected. This text area should be hidden by default or when selecting "NO". <table class="tab ...

Deactivating a widget on one of my web pages

I'm looking to disable a widget on certain pages. Does anyone know how to do this? One idea I had was to add a condition in the HTML (using Django or PHP?) of the widget that would make it only appear if the site URL is not the one where I don't ...

What steps do I need to take to create a custom image for a website?

I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...

Easily input new information into your MySQL database with just a click by utilizing a link through PHP and HTML

Is there a method to modify information in a MySQL database when a user clicks on a hyperlink? I'm developing a voting application. It enables users to save questions for immediate use or later use. When the user is viewing their created questions, t ...

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly

I am currently developing my senior year portfolio website and I am struggling to center the navbar (Work About Contact) when it is in mobile mode. My goal is for it to be positioned directly below the logo, perfectly centered, but so far nothing I have tr ...

Mobile display issue with CSS columns when using the :checked pseudo class

I have embarked on the creation of a portfolio website that relies solely on CSS3 to present a grid and filter out thumbnail images. If you're curious about what I've accomplished so far, feel free to take a look here. To achieve the filtering ...

Rails is being overwhelmed by an excessive number of icons being added by Bootstrap

I'm having an issue with adding a user icon to my header. When using Bootstrap, it seems to be adding more icons than I have specified in my code. Can anyone help me figure out what's going on? Thanks in advance! <ul class="nav pull-right"> ...

spontaneous angular rotations in a constantly shifting CSS environment

Is it possible to apply a random CSS rotation to an image just once, rather than having it continuously spin when hovering over a leaflet map? http://jsfiddle.net/J03rgPf/mzwwfav4/3/ I want the random CSS rotation to be set only one time. How can I achie ...

PHP table not displaying data

I am brand new to this and currently enrolled in a class with an unhelpful professor. I am attempting to read data from a file into a table, but for some reason the data is not displaying. I have tried multiple approaches, but I am feeling quite lost. Any ...

I want to learn how to display the rupee symbol instead of the default dollar symbol in AngularJS for specific currency symbols

When using 'currency' in AngularJS, I noticed that a dollar symbol is displayed. How can I change this to show the required currency symbol based on different requirements? Currently, I am looking for information on how to display a rupee symbol ...

Unable to display PHP variable in HTML

I am currently facing an issue while attempting to display user input that includes double quotes in an HTML form. When I echo the input, everything before the double quotes is being shown. For example, if the input is "6" Tropical Premium $8.99", only "6" ...

Challenges with creating a contact form using bootstrap modal

I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong? On iPad, the modal is positioned to the right and down the page instead of in the cente ...

Creating a Standard DIV Element (JavaScript Code)

Just a quick question here. http://jsfiddle.net/fkling/TpF24/ In this given example, I am looking to have < div>Bar 1</div> open as default... Any suggestions on achieving that? That would be all for now. Thank you so much! :D The JS script ...

XSLT selecting the remaining elements in a tokenized array

In my XSL document, I have a requirement to generate a hyperlink with text that includes a line break, resulting in two separate sentences. To achieve this, I am utilizing the tokenize function to split words based on whitespace character. <xsl:variab ...

Guide to displaying a pop-up modal containing text and an image when clicking on a thumbnail image

Recently delving into Bootstrap 3, I created a thumbnail grid showcasing images related to various projects. My goal is to have a modal window pop up when clicking on an image. Within the modal, I want to display the selected image alongside some descrip ...

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

Step-by-step guide to creating an Angular HTML template when a button is clicked:

I'm attempting to design an HTML template in order to export it as a PDF File, however, I'm unsure how to accomplish this using Angular's engine; Essentially, what I want to achieve is to construct this template when I click a "Download As ...

To make a JavaFX label stand out, simply prepend a vibrant red asterisk at the start of

I'm facing a challenge with my SceneBuilder project. I have developed a scene that consists of several labels, and I want to highlight some of them by adding a red asterisk at the beginning of their text. Unfortunately, I haven't been able to fin ...

Is there a way to optimize downloading multiple identical images using html, css, jquery, etc.?

My chess board features 64 squares, each with a picture of a board piece on either a light or dark square. To ensure proper formatting, a Clear knight is placed on the board. The design utilizes a div element with a background image (representing light or ...

Having trouble retrieving accurate text information from a JavaScript link

I am encountering an issue with my code which consists of links with divs inside them. When I click on a link, it should display another div with data for "Case No" and "Type". However, the problem is that it only fetches the data from the first link click ...