Side header

[Keez_80]

I want to have a pop up from the right side. Just like on this site.

I am think it is possible with a side header?

[prakash_s]

Hi Keezia,

Thanks for writing to us.

It is achievable a slide-in menu with an image toggle button by Navigation Collapsed Element.
First of all go to Navigation Collapsed element -> Toggle -> Graphic setup ( choose image icon here) -> Primary Graphic image (add the image here).

Now increase the height and width of image from Toggle -> set up -> height and width settings.
Then assign the menu from Menu -> Set up -> Assign menu and choose a menu from the drop-down.

Please check the screenshots.

Here is a documentation of the Element.

Hope it helps you.
Thanks

[Keez_80]

Awesom, thank you so so much Prakash… i will try this

[tristup]

Hi Keezia,

You are most welcome, please let us know how it works for you.

Thanks

[Keez_80]

On the existing header, in layout i selected right header. Then bar>container>navigation collapsed element. But i don’t see toggle in there.

[Keez_80]

Seems like the toggle option is available only on the top header and not for side bar.
If i attempt navigation collapsed on a content page, i see the toggle option.
If i try off canvas option, it can be launched only with a button.

My motive was for a image(to trigger the sidebar, that will show some content) to appear when scrolling down until the footer [ on on that website ].

[prakash_s]

Hi Keezia,

You are right. The toggle option available only at Header.

Please follow the following steps.
Add a Navigation Collapsed element in Header inside a Bar -> Container.

Now Edit the bar and make it sticky from the Sticky bar option. Then set Content length and Content Max Length.

Now set Align Horizontal value End from Flexbox settings.

Now edit the container and set Align Horizontal value End from Flexbox settings.

Hope it helps.
Thanks

[Keez_80]

Thanks for your help.

I was looking to have this on a sidebar and not the main bar. If its not possible, then i will try the option on a header. thanks

[ruenel]

You are most welcome!