With SiteOrigin Page Builder, I’m trying to create fixed navigation buttons (SiteOrigin Button) on both sides of the browser window (vertically about middle and outside the main region/area). I want the buttons to be only on certain pages, and each page has individually linked buttons.
I can do a 2-column row that’s full-width-stretched and have buttons fixed on the stretched ends of the row using the row’s CSS Styles:
position: fixed;
width: 100%;
top: 40%;
z-index: 10;
and aligning the buttons to left and right. So they stick to the edges of the browser window about half way down.
My problem is that, if I have widgets with hovering functions, the hover does not work when the mouse pointer is in the same height than the buttons (the row).
I can do a button on left side and shrink the row width to, let’s say 60px:
position: fixed;
width: 60px;
top: 40%;
z-index: 10;
and the button row does not interfere with the hovering (the row is not over the hovered item).
However, I cannot make the 60px wide row aligned to right side. How would I be able to do that? Or any other ideas/ways to do the fixed buttons located on both sides and on the edges of the browser window (about half way down).
(I’ve not found a proper plugin for my purpose, so I would like to do my buttons with the Page Builder, if possible.)
Please help! Thanks in advance!
I was able to solve the problem! I just changed the Row Layout to Standard, and then aligned the row to right:
position: fixed;
width: 60px;
right: 0px;
top: 40%;
z-index: 10;
Hi Lastala,
I’m glad to hear you were able to align the buttons as desired. I’m sorry I wasn’t able to be of assistance this time. Please be sure to post another thread if you have any other questions.