Menu icon Foundation
Off-Canvas - How to resize/wrap content-section?

Hello,

I'm looking for a off-canvas with content resize/wrap instead of moving the whole viewport or laying the menu over it.
To understand, please look into the attached image. The first two pictures showing the default example how it can be found and work in the documentation.

The third example is my target example, how I want it to behave.

My only idea is to fire javascript to change the width of the content-part (content-section) of the off-canvas when the menu is toggled.

But I think this could be a messy idea so I would like to know if there is already built-in support for increasing/decreasing the width of the content-section.

Instead to lay something over or move the whole viewport.

Off canvas example

off-canvaswrapresizecontent-section

Hello,

I'm looking for a off-canvas with content resize/wrap instead of moving the whole viewport or laying the menu over it.
To understand, please look into the attached image. The first two pictures showing the default example how it can be found and work in the documentation.

The third example is my target example, how I want it to behave.

My only idea is to fire javascript to change the width of the content-part (content-section) of the off-canvas when the menu is toggled.

But I think this could be a messy idea so I would like to know if there is already built-in support for increasing/decreasing the width of the content-section.

Instead to lay something over or move the whole viewport.

Off canvas example
Rafi Benkual over 4 years ago

It seems to me that is a different component. You could use off-canvas, remove the overflow: hidden on the outer wrapper, then calculate the width the menu opens and shrink the content container by that width.

Jatin popli about 2 years ago

Wrap content can be resized but your knowledge of words cant be resized as it needs to be increased daily for better improvements ,crossword puzzles online is the best way to learn new words and improve your vocab skills as well.