Recent News

How to add sticky image on sidebar as scrollable on WordPress

There is no specific plugin to make a sticky image for your website to scroll on all pages of the website. But I have made some customization and made it possible to have a sticky image on my website sidebar. Here is a complete documentation through which you can add a sticky image on your website right sidebar.

Step 1:

Download from WordPress repository and install in your website as normal plugins installation and activate it

Step 2:

Go to setting> sticky menu and make changes as i have done in my website, See screenshot for more details

Above changes are made to set your image in the center of the page, here sticky element id is set as call_center_icon , this id will be used in next screenshot for more explanation.

Step 3:

Now add new image icon that you want to make as scrollable on your website and copy the path of the uploaded image. Please see the screenshot

Now Open your header file and place following code
<i mg id=”call_center_icon” style=”float: right; width: 150px; height: 150px; top: 500px;” title=”Click here to learn more!” src=”” />

Above code will be in your header file and in that case image will be placed on your website header, you have set the Hight ,width, top and also path of uploaded file. Here call_center_icon is the same id that we have used in step 2

Step 4:

Now Just save the header.php and reload your website home page, You will see the following image where a image icon in your website right sidebar appear. This icon will scroll down as you scroll down your cursor.

Step 5:

In above exercise, scrollable icon has lower x-index in that case your icon can be hidden in some cases like slider, To make this scrollable image icon prominent, Just set the x-index as highest. see following screenshot to make it prominent.

z index for wp image

Leave a Reply

Your email address will not be published. Required fields are marked *