[ThanksDFGParticipant]

Hello,

I’m having a bit of a pickle with trying to blur the background of the header (.x-navbar). I have discovered
-webkit-filter:blur(2px);
which does exactly what I want (blur changes/adapts by scrolling), and I tried it using Custom CSS on Cornerstone, but it blurred the logo and the text.
I thought by making a transparent image, setting it as a background of the header and then applying the webkit filter would work, but I couldn’t locate the CSS path of the transparent image so that idea was a bust (maybe there is a way?).
So I am looking for help now, how would one blur the background of the header? Something along the lines of the iOS 7 and above headers (Messages etc.).
Where I discovered the Webkit filter

Any help would be greatly appreciated!

[ThanksDFGParticipant]

Forgot to add, this the website where I am trying to do that, using the Renew stack.

[ZeshanMember]

Hi there,

Thanks for writing in!

Regretfully this isn’t a feature offered by X. It could be possible with custom development. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

So, try adding this CSS code under Custom > CSS in the Customizer:

.x-navbar:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.3);
    -webkit-filter:blur(2px);
}

It will add a white semi-transparent background color to the :before pseudo class of navbar and then add a blur to it.

You can add your background image or different color as per your requirement.

Thanks!

[ThanksDFGParticipant]

Hi again,

I’d like to expand on this question. What CSS would make the header look similar to this ?

Thank you for your help in advance! You guys rock!

[RupokMember]

Hi there,

Thanks for updating! You can use the rgba color for that. Like –

background-color: rgba(255,255,255,0.3);

The first three value is for RGB color and last value is for opacity level. Try decreasing the value to get more transparency.

Thanks

[Author]

Posts