-
AuthorPosts
-
May 23, 2023 at 12:22 pm #1408243
Hi Team
Please could somebody assist me with setting up a sticky flyout on the right-hand side of all my pages in enfold?. I don’t know if I have named the element correctly. You can go to http://www.defendoor.co.za and see what I am referring to – it is the “GET A QUOTE” sticky flyout on the right in green.
Thank you
May 23, 2023 at 3:04 pm #1408261Hi M-Graphics24,
Please try the solution posted by Mike on this thread: https://kriesi.at/support/topic/sticky-button-on-the-right/
Just change right: 12%; to right: 0;Best regards,
NikkoMay 23, 2023 at 3:38 pm #1408273Hi Nikko
Thank you for your response. I added the code into the functions.php and put the css into general styling but I now have an “overview button” at the top of my screen instead of a flyout on the right hand side. I also need to have it link to the contact page when I generate it (I have not designed the contact page as yet.
It must also be sticky and move down the page as in the example I sent through (www.defendoor.co.za)I have added the site access in private content
May 23, 2023 at 4:07 pm #1408283Hi Nikko
Sorry on second check, I see that the button flyout is positioned on the right on a mobile but in the centre on top of the screen on a laptop. Also the problem on the mobile is that the button is covering my burger
May 23, 2023 at 4:38 pm #1408295Hi M-Graphics24,
Thanks for giving us admin access.
It seems you don’t have a child theme, so I removed the code from functions.php (since it will be overwritten when the theme is updated).
I have installed a plugin called WPCode where I inserted the code instead, I also replaced the code with:function custom_script() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ var button = $('<div id="sticky-button-wrap"><a href="#" class="sticky-button">Get a<strong> Quote</strong></a></div>'); $(button).prependTo('#main'); })(jQuery); }); </script> <?php } add_action('wp_footer', 'custom_script');
If you want to change anything or add a link to the button, you can go to the link in private content (you can also deactivate the code, if ever you decide to remove it).
Then in Quick CSS, I have removed the code since it’s inside a media query for mobile, and added this CSS code on top:#sticky-button-wrap { position: fixed; right: 0; top: 40%; z-index: 503; } #sticky-button-wrap .sticky-button { background: rgba(45,186,127,.95); display: block; width: 90px; height: auto; padding: 12px 6px; text-align: center; text-transform: uppercase; line-height: 1 !important; color: white; font-size: 15px; line-height: 1.4; border-radius: 4px 0 0 4px; letter-spacing: .05rem; transition: all .3s ease-in-out; } #sticky-button-wrap .sticky-button:hover { background: #2DBA7F; } #sticky-button-wrap .sticky-button strong { display: block; font-weight: 700 !important; }
Please review your site.
Best regards,
NikkoMay 23, 2023 at 4:41 pm #1408296Hi Nikko
Thank you very much for this. I will review and revert soonest.
May 23, 2023 at 4:42 pm #1408298Hi M-Graphics24,
You’re welcome :)
Just let us know how it goes.Best regards,
NikkoMay 23, 2023 at 7:28 pm #1408328Hi Nikko
It looks amazing, thank you. I might have to revert to you to understand how to do the link but I will see when I get to that.
Thank you.
May 24, 2023 at 2:59 am #1408345Hi M-Graphics24,
You’re welcome. :)
In the script I added to WPCode, you just need to edit # with the correct URL to link to, so this code I gave:var button = $('<div id="sticky-button-wrap"><a href="#" class="sticky-button">Get a<strong> Quote</strong></a></div>');
would be:
var button = $('<div id="sticky-button-wrap"><a href="https://www.website.com/" class="sticky-button">Get a<strong> Quote</strong></a></div>');
Best regards,
NikkoJune 8, 2023 at 2:22 pm #1409989Hi Nikko
A quick follow-up on the above. I have added the above code for the link to the contact page and it works perfectly on a desktop but not on the mobile – please assist with this.
Regards
June 8, 2023 at 7:13 pm #1410014Hi M-Graphics24,
I tried to click on the the Get a Quote button on my mobile phone and it seems to work properly and redirect to the contact page.
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.