[Support request] Button on the side of page – positions?

Home Forums Support Button on the side of page – positions?

  • This topic has 11 replies, 4 voices, and was last updated 4 months ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #1287549

    I got a follow up question to this topic: https://generatepress.com/forums/topic/slide-out-bar/

    I played around with the plugin you recommended a little and really like it so far

    With the plugin you can create a code for a button that opens the slidebar as seen here: https://ps.w.org/off-canvas-sidebars/assets/screenshot-4.jpg?rev=1888961

    Not sure about the available positions gp offers
    Which position to insert the button-code to show it best on the left or right side of my gp theme?

    Customer Support

    Hi there,

    Not sure about the available positions gp offers
    Which position to insert the button-code to show it best on the left or right side of my gp theme?

    Sorry not sure if I understand.

    GP doesn’t offer any specific options for that plugin.

    Where did you want the button to show? I believe a hook element would be what you are looking for:


    i want to show it on the right side of the page – somewhere around the middle.
    thought this was somehow a widget position.

    Lead Developer
    Lead Developer

    Can you show us a screenshot of where you’re wanting to place it maybe?

    Let me know 🙂

    Lead Developer
    Lead Developer

    Ah, so you would do this:

    1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
    2. Add your hook content:

    <div class="floating-button">
        Your shortcode here

    3. Check the Execute Shortcodes checkbox.

    4. Set your Display Rules

    Then, you’d add this CSS:

    .floating-button {
        position: fixed;
        top: 45%;
        right: 0;

    This didnt work.

    Is wp_head the right hook?
    I added the css to my child-theme style css.

    I added it
    a) for entire site and
    b) for the vision page – but it doesn’t show.

    What i tried also: it can be added as widget (it is available as widget (off-canvas-trigger)- which i added in the footer bar for testing) to test if it works – which it does.

    Also i tried adding the shortcode-code (via gutenberg shortcode block) to a page – which also works) – so the shortcode should be fine.

    You can see that on the vision page (button is grey on the left bottom).

    Customer Support

    Use the after_header hook for adding the HTML. WP_head should be reserved for meta,links and scripts…


    that actually worked now the button can be seen on the right side.

    A few follow ups though:

    1.is there a possibility to rotate it? (Text Bottom to top).

    2. position says fixed – if i read right what that means – it should stay on that position even when scrolling the page. This isnt the case.

    3. Also about further customization of the button (color, corners etc.)- this codes will work when i add to style-css code from tom right? (dumb question maybe – but im no programmer 😉 ) https://www.w3schools.com/css/css3_buttons.asp .

    4. if i want to add a 2nd button – i just have to do the same with different position and top in the css right?

    5. Also – i can’t just add a button created with gb for that right?

    6. Been asking myself 5 and – also about gutenberg in widget areas (as i want to fill the sidebars opened by the button with content next).

    Lead Developer
    Lead Developer

    I wonder if a plugin like this might help more?: https://wordpress.org/plugins/sticky-side-buttons/

    It seems to do everything you’re looking for – it might be a better option?

    1. This should do it:

    .floating-button {
        transform: rotate(-90deg);
        transform-origin: 100% 100%;

    2. Strange, it’s acting like it’s position: absolute instead of being fixed.. I wonder if there’s something conflicting. What if you use generate_after_footer for the hook?

    3. Correct – basic CSS will work.

    4. Exactly, just add another button inside the floating-button element.

    5. It’s not possible to hook Gutenberg elements at the moment, but we’re working on it.


    The slidebar plugin provided the button shortcode – thats why i didn’t think about using a plugin.
    Edit – just tried the plugin you linked. Sadly it can only link to url (and open in same or new tab) – shortcode does not work.

    1. Thx – that worked nicely.

    2. Yes – for some reason it was not floating.
    I tried the different hook as described on the plugin page – but it works (floating aside) with the recommended wp_body_open and wp_footer.
    generate_after_footer works also – but doesnt change behaviour.

    What did work: the plugin has some options for “Compatibility for fixed elements”. Before i had it set on:
    -> No (Use CSS3 transform with hardware acceleration), This is the default Slidebars behaviour.

    Changing it to:
    “Legacy CSS solution” (Use basic CSS positioning instead of CSS3 transform with hardware acceleration) This is your best option if your site uses sticky menus and/or other fixed elements within the site container.

    did make the button float.
    But in return it was stuck when opening the slidebar (meaning the bar floated over the button.) – instead of the button staying in front.

    Even more interesting: changing fixed to position: absolute; -> it floats together with the slidebar again. Deja vu :D. Guess i will try around a little and stay with non-floating if i didnt get it to work.

    3+4 thx – already playing around – but for some reason it doesn’t take over the changes (like font-size or color)

    5. sounds like a plan – btw- do you know this plugin – pages in widgets??

    Lead Developer
    Lead Developer

    3+4: Make sure your CSS is specific enough. If you right-click + Inspect the element it will open developer tools and you’ll be able to see the CSS added.

    5. I haven’t, but it looks interesting 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.