Home Forums WoodMart support forum Blur sticky header

Blur sticky header

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #451641

    MatoZato
    Participant

    Hello. Please how can i do Blur sticky header?

    How CSS code?

    Thank you very much.

    #451677

    Luke Nielsen
    Keymaster

    Hello,

    Please try to use the below code, enter it into the “Desktop CSS” area in Theme Settings -> Custom CSS.

    .whb-sticked .whb-row {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
    }

    Feel free to reach out to me anytime when you have anything more to say.

    Kind Regards

    #452078

    MatoZato
    Participant

    Hello. Thank but ist not a BLUR.

    I need Black Opacity and BLUR

    Thank you very much.

    #452081

    Luke Nielsen
    Keymaster

    Hello,

    In this case, try the below one.

    body .whb-sticked .whb-row {
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(7px);
    }

    https://monosnap.com/file/cL7pCWnv1JFlBTVZJFj1GwZNwAbJhm

    Kind Regards

    #452521

    MatoZato
    Participant

    Hello.

    Please.

    Blur not work.

    #452570

    Luke Nielsen
    Keymaster

    Hello,

    Could you please update the access? Because seems that the last one is incorrect.

    https://monosnap.com/file/APAjCCsFbabYg4Fmcw6Nnk0evUO7s5

    I await your response.

    Kind Regards

    #453439

    MatoZato
    Participant

    Yes. Try please.

    #453573

    Luke Nielsen
    Keymaster

    Hello,

    Sorry but I still cannot access the admin panel, here is a screenshot:

    https://prnt.sc/4o5v0i5feRZW

    May I request you check the access on your side?

    I await your response.

    Kind Regards

    #453605

    MatoZato
    Participant

    Hm. Try now please.

    #453670

    Luke Nielsen
    Keymaster

    Hello,

    I see that the “Blur” is working well right now, here is a screenshot: https://prnt.sc/_ayxNFRFrqkA

    Let me know if you have any questions, I’d be happy to answer them.

    Kind Regards

    #453843

    MatoZato
    Participant

    I dont know why. But for me not working.

    I send image.

    Attachments:
    You must be logged in to view attached files.
    #453904

    Luke Nielsen
    Keymaster

    Hello,

    I am using the Chrome browser and there this feature is supported. So most likely you use a browser that doesn’t support such a feature via the above CSS.

    In the meantime, feel free to ask me any questions you may have.

    Kind Regards

    #453944

    MatoZato
    Participant

    I try FireFox and Safari and not workin

    #453945

    MatoZato
    Participant

    And on page https://www.apple.com/
    it workin in FireFox too. Why? 🙂

    #454131

    MatoZato
    Participant

    Please

    #454373

    MatoZato
    Participant

    Please, you can answer me, why Apple Blur effect work on every browser?

    #454404

    Luke Nielsen
    Keymaster

    Hello,

    Please add the below code into the same area in Theme Settings -> Custom CSS. Then recheck the issue.

    body .whb-sticked .whb-main-header {
        transform: unset;
    }

    Thanks for your time and have a great day.

    Kind Regards

    • This reply was modified 3 days, 18 hours ago by Luke Nielsen.
    #454453

    MatoZato
    Participant

    Yes cool.

    Its work 🙂

    Thank you very much 🙂

    #454455

    Luke Nielsen
    Keymaster

    You are welcome! Don’t hesitate to reach out if you have any more questions. We’re thankful that you took the time to share your concerns with us.

    Have a good day!

    Kind Regards

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘Blur sticky header’ is closed to new replies.