Sticky bubble gum sticking to shoe

Sticky Buttons

Breadcrumb

 

How to create Sticky Buttons

 

Create a basic block and place this code as the source code (click here to learn how to get to where you can edit/add source code):

<div class="stickybtn-yellow">
<p><a href="#" id="stickybtn-close">x</a><a class="stickybtn-anchor" href="replace-me" target="_blank">Button Text</a></p>
</div>


If you want a blue button change the class in the first div to stickybtn-blue.
If you want a green button change the class in the first div to stickybtn-green.

 

creating a basic block for a sticky button - this is the source code

You can edit Button Text to be whatever you would like your button to say.  
replace-me needs to be replaced with the full URL of the site you want to go to.  If you are linking to a page within your site, enter everything after .edu 
Example:  https://yoursite.ucr.edu/faculty/emeritus  Here you would enter /faculty/emeritus

If you click the source icon you will see only a link:

creating a sticky button custom block

Now you need to place the block.  Go to structure --> block layout.  Find the Site Notifications section.  Click the Place block button.  Find your block and click Place Block.

Next you will see the Configure Block panel.  Uncheck "Display Title".  Set the CSS Class to stickybtn.  Click on Pages.  Here you will enter which pages you want the button to be displayed on.  If you leave it blank, the button will display on every page.  To enter a page, enter everything after .edu in it's URL.  For example, if you wanted the button to show only on https://yoursite.ucr.edu/faculty/emeritus,  you would enter /faculty/emeritus.  Each additional page goes on a separate line in this Pages box.

configure panel

 

Click save.  You should see the button on the page(s) you specified.  You may need to flush your cache, which you can do by clicking on the blue water drop Drupal icon at the top left of your page and selecting "flush all caches".   

If you make edits to your button, you will need to flush the cache to see your changes.

 

 

 

 

Let us help you with your search