Sticky bubble gum sticking to shoe

Sticky Buttons



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>

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:  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,  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