Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 28, 2022 at 10:05 am #1356691
    CC2022

    Need your help: I read the documentation about this topic, but still do not understand, how to create and configure a floating button, that appears on each page of the enfold-Installation. I work with a child-theme.
    Thanx in advance
    CC

    June 28, 2022 at 12:45 pm #1356707
    Rikard

    Hey CC2022,

    You should be able to do that with a widget in the header for example: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area. Make sure to place it in a fixed position. If you need help with styling, then please add the widget and content, then link to where we can see it.

    Best regards,
    Rikard

    June 28, 2022 at 1:38 pm #1356722
    CC2022

    Thank You so far, but the button shall not appear in the header-area, but shall always cling to the right border of the screen (vertically in the middle).

    June 28, 2022 at 2:40 pm #1356730
    CC2022

    I added a link below in the „private content“. There you can see a composing of how it shall look like (here the mobile view). I mean the Button on the right „Termin buchen“.
    Maybe you know the best way to realize this with enfold?.
    Thank you in advance.
    CC

    June 28, 2022 at 3:26 pm #1356735
    Rikard

    Hi,

    You should be able to achieve that with CSS. If you need further help, then please post a link to where we can see the actual element.

    Best regards,
    Rikard

    June 28, 2022 at 3:50 pm #1356743
    CC2022

    You mean, that I have to place the widget into the header area and then give it a fixed postition via CSS to it outside the header-area?

    June 28, 2022 at 4:13 pm #1356754
    CC2022

    I decided to place the button on the home-page, but it always disappeares behind the layerslider, the header and the footer. I already changed the z-index of the button:
    z-index: 999999!important;

    What else can I do, to bring it in front?

    June 28, 2022 at 5:01 pm #1356764
    Rikard

    Hi,

    We need to inspect the element in question, in order to give you accurate CSS. Could you post a link to where we can see it please?

    Best regards,
    Rikard

    June 28, 2022 at 5:12 pm #1356769
    CC2022

    All right. — Here comes the link to my site, where I test it, before konfiguring in it on the client’s site. The button sticks to the right side behind the layerslider and appears, when scrolling down.

    June 28, 2022 at 8:06 pm #1356776
    Rikard

    Hi,

    Thanks for that. It looks like you didn’t place it in a widget? You would need to put the z-index value on the section instead. Please add a custom ID to the section in question, then use CSS like this:

    #your-section-id {
    z-index: 30;
}

    Best regards,
    Rikard

    June 28, 2022 at 8:52 pm #1356781
    CC2022

    Hm, thank you, but it doesn’t work. The „button“ is still in the background although it has its own section with an ID and the customized z-index…

    June 29, 2022 at 6:31 am #1356796
    Nikko

    Hi CC2022,

    Please try adding this CSS code:

    #top #sec_30 .av-content-full {
    z-index: 50 !important;
}

    Best regards,
    Nikko

    June 29, 2022 at 11:12 am #1356831
    CC2022

    Thank you very much Nikko,
    it works!
    Best regards
    CC

    June 29, 2022 at 11:45 am #1356834
    Nikko

    Hi CC,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Floating Button on each page’ is closed to new replies.