Need help? Check out our Support site, then


CSS Customizer floating button, top right

  1. Hello, I'd like to make a floating button on the top righthand side of my page, over the header image, and was wondering what code i could use in the CSS customizer to be able to do that? It would link to my encinitasarts.org/support/ page

    Thanks!

    The blog I need help with is encinitasarts.org.

  2. Hi there

    The best way to do what you want, is to add a Text Widget to your main sidebar and then add CSS to style it. So here's what you want to do:

    1 - Add a Text widget to your Main Sidebar, with no Title, and this in the Content -> screenshot https://cloudup.com/cb4V-LQxKtX
    <a id="support-button" href="http://encinitasarts.org/support/">Support</a>
    That will add a link to your main sidebar that links to your support page.
    2 - Then you want to style that link by adding the following CSS: screenshot https://cloudup.com/cVVqHyusdBr

    #support-button {
    position: fixed;
    top: 0px;
    right: 0px;
    padding: 11px;
    background: #71decc;
    color: #4F4F4F;
    z-index: 9999;
    }

    What that will do is create a button with similar styling to your menubar at the top right on your site that will stay there when you scroll throughout the page: https://cloudup.com/c3JHpvTVvFh

    Let me know if you struggle getting this done.

Topic Closed

This topic has been closed to new replies.

About this Topic