CSS Customizer floating button, top right

  • Author
    Posts
  • #2660856

    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 encinitasarts.org.

    #2660900

    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.