Archived topic
Slide out contact bar on the side
1 reply · Started by Matthias on March 7, 2022
Hi there,
i wonder if Gutenberg+Generatepress can create a sliding "button" on the side of my page that - when pressed opens a small page showing 4 icons in 2 rows (with icons for mail, phone etc. contact).
It should kind of look like this (right side) - but only activate on click and slide down/up with the page.
Can buttons be added like this?
Hi Matthais,
This is possible but you would still need custom CSS along with the GB blocks.
For instance, with this setup: https://share.getcloudapp.com/5zuLWp7j
Also see: https://share.getcloudapp.com/NQuNOqv9
I added this custom CSS to achieve it:
.gb-container.gb-container-5ecd469d > .gb-inside-container{
display: flex;
align-items: center;
}
.gb-container.gb-container-5ecd469d {
position: fixed;
right:-120px;
top:500px;
}
.gb-container.gb-container-5ecd469d:hover{
right:0;
}This will work however on hover only. If you want this to take effect on click you would probably need Javascript already. :)
Kindly replace .gb-container-5ecd469d with the class of the Parent Container. You may also set your own custom class through Additional CSS classes: https://share.getcloudapp.com/NQuNOqZ9
Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css
Alternatively, you may also use a third plugin. Here is the repository of WordPress for everything off canvas: https://wordpress.org/plugins/search/off+canvas/
Hope this helps!
