CSS Customizer floating button, top right

  • apourat · Member ·

    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: (visible only to logged in users)

  • jeffikus · Staff ·

    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.

  • The topic ‘CSS Customizer floating button, top right’ is closed to new replies.