How do I align the toolbar to bottom of the page?

  • Forgive me if this has already been answered, but I looked and couldn’t find an answer. How can I align the icon/toolbar to the bottom right of the page where it will always stay in one spot no matter the screen height? I’ve tried using the “set Toolbar top offset” option, but this really doesn’t do what I want it to do. Here’s an example of exactly what I’m looking to accomplish: https://www.greatamericanbeerfestival.com/ Note the accessiBle toolbar on this website is always in the bottom right hand corner of the screen no matter how small you make the screen height and it works on all devices (desktop/tablet/phone) seamlessly.

    Thanks in advance for the help!

    • This topic was modified 1 year, 8 months ago by hwressnigg.
Viewing 2 replies - 1 through 2 (of 2 total)

  • The example you linked to uses accessiBe, a popular accessibility plugin that starts around $500/year.

    I am looking for the same thing though. – How do we get the icon out of the way for people who don’t need accessibility features? I like the idea of making my pages more accessible. But I don’t want to lessen the experience for my average visitor. … In the dashboard if you go to Accessibility > Customize there are settings to move the icon to the right-hand side of the screen and tell it how many pixels to move down from the top of the page. Can be set for desktop and for mobile.

    I do appreciate what One Click Accessibility gives us! I turn on grayscale when reading some of my own articles to decrease eye strain and headaches. But it would be nice if they added an option to bottom-align.

    Nathan

    (@natedanielz)

    #pojo-a11y-toolbar {
    top: auto !important;
    bottom: 15px;
    }

    #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle?{
    right: 195px !important;
    }

    #pojo-a11y-toolbar.pojo-a11y-toolbar-right.pojo-a11y-toolbar-open ..pojo-a11y-toolbar-toggle {
    right:180px !important;
    }

    #pojo-a11y-toolbar.pojo-a11y-toolbar-right.pojo-a11y-toolbar-open {
    display: flex;
    flex-direction: column-reverse;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I align the toolbar to bottom of the page?’ is closed to new replies.

Tags