Hi, I’m trying to recreate the polygrid theme layout using uikit 3 but can’t figure how to create the white fixed column where the off canvas menu is positioned. Tried the grid stack but can’t find where I can set a fixed width. Any suggestions welcomed, thanks.
This is a tricky one, hand-coded it was so…my first idea for the height and without testing is by using a Height stack in viewport mode, then put that into a Position stack set to left and fixed.
Thanks for the quick reply!
I was able to get close by using a sticky stack on the left grid but width is still not near to the theme example. I will try your suggestion. If not I’ll just have to purchase your theme 😃
Yes, buy the theme for the full effect. :-)
Or, if you want something close in Uikit just use Sidebar, which is part of the Blurprint suite of stacks from @tav BluePrint Stacks for RapidWeaver
You could also use the regular UIkit3 grid and apply some custom css to fix the left col to about 30px wide and then set the right one to “Auto”.
hi, i will try tav’s sidebar… at the moment i was testing out defligra’s sidecar stack and i thought i may have done it, but when I add the off - canvas stack it pushed the layout but because I have the image and nav in a sticky stack so it does not scroll up they don’t move/push as the rest of the layout does. thanks for the file will take a look
It’s really easy with UiKit native grid too. Just use a bit of css.
Hi, thank you very much for the file, both options look great… a good learning example of grids.
It looks like when using the off canvas you can only use the slide effect option. If I try the push option and scroll to the 2nd skater image the menu icon does not move or pushed with the layout it just disappears and then reappears when I close the menu. Something breaks the menu icon from moving with the page maybe the sticky stack and that effect don’t play nice.
On a side note: can the close button icon be positioned on the left side of the off canvas menu?
Yep. In the Offcanvas stack select no close button, then add your own to the drop zone of the stack. Use a button with an icon but no text, then select integration as “Close Modal” and give the ID the same name as your Off-Canvas stack.
1 Like
Actually, here’s a better way to do it.
This uses the position stack with the button inside a basic container (S4 1Col) so you can get the positon of the close icon is exactly the same place as the menu bar icon, which I assimed you’d want.
I also gave the wrong settings for the close button just now. Don’t set integration to Close modal, set it to Offcanvas. I forgot the Offcanvas class is a toggle, so it’ll open or close it, depending on the current state.
Looks like this… sidebar | My Website
2 Likes
good stuff! thank you again!