Home › Forums › WoodMart support forum › How to create blur header

How to create blur header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 13, 2023 at 8:39 pm #442654

    henalon123
    Participant

    Hi there, we can’t find an option for transparent/blur/glass effect background in woodmart header builder.
    We saw this tutorial on youtube : https://www.youtube.com/watch?v=lW8MVPn7y54
    and it is done with elementor, but if we do this in elementor how we can insert all of the woodmart elements inside of this header? (cart/wishlist/account/ etc,, )
    Waiting for your response,
    Best regards.

    February 14, 2023 at 2:20 am #442691

    Elise Noromit
    Member

    Hello,

    You can set the image on the row background or set the color in the settings: https://xtemos.com/docs-topic/header-rows-and-columns-configuration/

    If you have any questions please feel free to contact us.

    Best Regards

    February 14, 2023 at 2:26 am #442694

    henalon123
    Participant

    Hi there, actually thats not what we asked for, if you will watch the start of the video here : https://www.youtube.com/watch?v=lW8MVPn7y54 you will understand what im talking about, its a blur effect, like showing what’s behind the header with a blur effect.
    If its not possible doing it with woodmart header builder so how I can add woodmart header elements into a custom Elementor header?
    Waiting for your response,
    Best regards.

    February 14, 2023 at 3:19 am #442707

    iamfahrig
    Participant

    You can use this code
    CSS;

    .whb-sticked .whb-row, .whb-sticky-shadow.whb-sticked .whb-main-header { 
   background-color: rgba(0,0,0,0.4)!important; 
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
}
selector{ 
   transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
   min-height: 70px;
}
selector > .elementor-container{
   transition: min-height 1s ease !important;
}
}
    Attachments:
    You must be logged in to view attached files.
    February 14, 2023 at 3:35 am #442712

    henalon123
    Participant

    Hi there, where I need to put this code?
    It is also available on WPbakery websites?
    Waiting for your response,
    Best regards.

    February 14, 2023 at 3:41 am #442714

    iamfahrig
    Participant

    Please add this code to the Theme Settings > Custom CSS > Global:

    Attachments:
    You must be logged in to view attached files.
    February 14, 2023 at 3:43 am #442716

    henalon123
    Participant

    Will try that now, but it is also working for WPbakery websites? Because in that code we can see clearly it was meant for Elementor only …

    February 14, 2023 at 3:56 am #442717

    iamfahrig
    Participant

    I’m using elementor, I set the codes to work on the site, you can test it

    February 14, 2023 at 7:19 pm #443016

    henalon123
    Participant

    Yes so I need it to work on WPbakery website as well .. any news from Woodmart support?

    February 14, 2023 at 7:21 pm #443017

    iamfahrig
    Participant

    what is your website ?

    February 15, 2023 at 3:50 am #443087

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .whb-sticked .whb-row, .whb-sticky-shadow.whb-sticked .whb-main-header { 
   background-color: rgba(0,0,0,0.4)!important; 
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
}

    Best Regards

    May 20, 2023 at 9:59 am #468448

    essskandari
    Participant

    Hello
    I am using this code and another one that was made by @iamfahrig both are working correctly. but not in Firefox.
    Mac, ios, and Chrome are ok but in Firefox it just makes transparency.

    May 23, 2023 at 12:46 am #469010

    Elise Noromit
    Member

    Hello,

    Please remove the code provided by the user and check how it work.

    Best Regards

    May 23, 2023 at 12:46 am #469011

    Elise Noromit
    Member

    Hello,

    Please remove the code provided by the user and check how it work.

    Best Regards

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)