Sticky Popup Question

[marymmccauley]

Is there a way to make a sticky icon that links the the contact bar at the bottom of my page? that way, no matter where a user is on the page, clicking the sticky icon will link them down to our contact bar?

[Prasant]

Hello Mary,

Thanks for asking.

You can take a look at following plugin to make necessary changes.

Sticky Side Buttons

Please note that the plugin I have shared is not a official Themeco advice. It’s just a personal input that I have shared with you to help you get started. 3rd party plugins may cause some issues and we won’t be able to provide support in that scenario.

Thanks.

[marymmccauley]

We don’t need sticky call buttons and etc., we just want a sticky element that links to the contact bar at the bottom of our page, so when clicked, it takes users to the contact bar. Do you know if we can achieve that with this plugin?

[ruenel]

Hello Mary,

The suggested plugin should allow you to create a sticky icons that links where ever you want it. Just install the plugin and check it out by applying it to your staging site.

Please let us know how it goes.

[marymmccauley]

That plugin was very incompatible, is there a way a simple linking button can be made in ConvertPlus? I literally just want a small sticky icon on the side that links to a section.

[nabeel]

Hi again,

You can do this with custom code also. Try adding the following code in your child theme’s functions.php file:

function sticky_button() {
		if ( is_page() ) {
  			echo do_shortcode('<a class="scroll-to-bottom" href="#sectionID">[x_icon class="scroll-to-bottom-icon" type="toggle-right"]</a>');
		}
}
add_action('x_before_site_begin', 'sticky_button');

In the href attribute give the ID of your section. Then add the following code in the Theme Options > CSS:

.scroll-to-bottom {
    position: fixed;
    top: calc(50% - 45px);
    right: 20px;
    z-index: 9999;
}

.scroll-to-bottom i{
    font-size: 45px
}

You can change the styling as per your need. To change the icon you can refer to the icons shortcode here http://demo.theme.co/integrity-1/shortcodes/icons/

Hope this helps!

[marymmccauley]

That is very helpful, thank you, but within wordpress, it say’s i’m unable to edit the functions.php file, so is there another way of adding the php code?

[friech]

Hi Mary,

Yes, there is, via FTP.

• Launch your favorite FTP Client and connect to the hosting server remotely. You’ll need an FTP credential on these, please contact your hosting if you don’t know your FTP credential.

• Navigate to /wp-content/themes/pro-child/ folder.

• On that folder locate the functions.php file.

• Open/Edit it in a text editor (textEdit, notepad++, sublime, etc) to modify the content.

• Save

Let us know how it goes,
Cheers!

[marymmccauley]

I just tried and am having some difficulty, could you review?

[rad]

Hi Mary,

The FTP is working but I too isn’t sure where your site’s folder is located. There are many folders, I found one WordPress installation by without X theme. Perhaps you could provide your admin login credentials as well so I could try checking the folder through debug information.

Thanks!

[marymmccauley]

I updated the secure note above with the site’s credentials, I hope it’s easy enough!

[ruenel]

Hello Mary,

I have found the correct directory and added the code in your child theme’s functions.php file:

// =============================================================================
function sticky_button() {
    if ( is_page() ) {
        echo do_shortcode('<a class="scroll-to-bottom" href="#footer-bar">[x_icon class="scroll-to-bottom-icon" type="phone-square"]</a>');
    }
}
add_action('x_before_site_begin', 'sticky_button');
// =============================================================================

I also added this css as suggested by @Nabeel;

.scroll-to-bottom {
    position: fixed;
    top: calc(50% - 45px);
    right: 20px;
    z-index: 9999;
}

.scroll-to-bottom i{
    font-size: 45px
}

And I also edited your footer to add a unique footer-bar ID.

Please check your site now.

[marymmccauley]

Thank you for your additional help!

It’s almost perfect, however, in the secure note, I input the PHP code with a different icon, as I think the angle-double-down is the most appropriate, so where can I go to update it? I also need to change the icon’s color to: #0088ff. Additionally, is there a way to place the icon flush against the right side of the screen, and have it placed starting below the Slider Revolution section, so it better blends in?

[ruenel]

Hello Mary,

I have updated the code and the css:

/* Scroll to bottom */
.scroll-to-bottom {
    position: fixed;
    top: calc(50% - 45px);
    right: 0;
    z-index: 9999;

    color: #0088ff;
}

.scroll-to-bottom i{
    font-size: 45px
}

function sticky_button() {
    if ( is_page() ) {
        echo do_shortcode('<a class="scroll-to-bottom" href="#footer-bar">[x_icon class="scroll-to-bottom-icon" type="angle-double-down"]</a>');
    }
}
add_action('x_before_site_begin', 'sticky_button');

Please check your site now.

[marymmccauley]

Thank you for your help

[friech]

We are delighted to assist you with this.

Cheers!