I now this woulld be out of scope for this support but I’m looking for a way how to get a rounded off canvas navigation like the screenshot example. Do you know a solution or can you point me how to do this…?
THX, Carel
Hi Carel,
It is required CSS code modification and that is why it is beyond the scope. If you are proficient with CSS you can add CSS code by targeting the x-off-canvas-content or x-off-canvas-content-right selector class to adjust the border-radius attribute.
I would suggest you go through the following article on Border Radius.
Hope it helps.
Thanks
Hi, With css I can make a rounding, see here https://cresult.nl/qlounge/ but not the curve I want. Maybe with SVG? Can you point me in that direction please?
Hello @cvdw,
Without SVG, you might be able to accomplish this with the help of the Off Canvas, DIV and Navigation elements liek this structure:
With the overflow of the Off Canvas set to visible;
The Pink background color of the outer DIV element is displaying. The rounded shape is coming from the border radius with the help of the minimum width and height attributes:
If you can give your log in detailes, I would be happy to create a demo for you and see if this solution fits for your desired look and feel.
Cheers.
Hi, it would be super if you can provide me a demo, I’ll send a login!
Thank you for the update. Looks like you’ve already managed to adjust the style of the off-canvas element.
Let us know if you need additional assistance.
Hi, no, this was just a try but not the curve I want. Forget this and please show me your solution with the DIV.
See the answer of Ruenel That one looks what I want to achieve.
We created a test page with the Off Canvas, Div and Navigation element. Please check the link in the secure note. You may need to temporarily remove this custom css.
.x-off-canvas-content {
border-top-left-radius: 80% 70%;
border-bottom-left-radius: 80% 70%;
overflow: hidden;
background: linear-gradient(to bottom,#3b0a00,#7f2d00);
}
I see but still the all round off canvas. Please apply what Ruenel came with in the header
So it will look like this:
We re-adjusted the Width and Border Radius properties of the Div element. You can adjust it more if necessary.
I still don’t see what to adjust to get the curve Ruenel made… Can you please ask him?
We attempted to adjust it again. If it requires more adjustments, just reply here and someone else will take the thread.
I’m trying the instructions of Reunel in the “Curve Header”. Can you please assist in this?