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

[Matthias]

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?

[Leo]

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:
https://docs.generatepress.com/article/hooks-element-overview/
https://docs.generatepress.com/article/hooks-visual-guide/

[Matthias]

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

[Tom]

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

Let me know 🙂

[Matthias]

Like on this page – maybe a little lower Just on the side.

[Tom]

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
</div>

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;
}

[Matthias]

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).

[David]

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

[Matthias]

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).

[Tom]

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.

[Matthias]

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??

[Tom]

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 🙂

[Author]

Posts