Question Fixed Header and a fixed left Block possible?

[Alain]

Hi

I want a fix Header-Navigation but also a fixed Block on the left side.
See here:

Does anybody know how to do this in Elementor?

Kind regards
Alain

 

[Alain]

Is this not possible in Elementor?
Please let me know.

Kind regards
Alain

 

[Tonio]

It is possible, but you need a work-around.

- Create a header, the fixed navigation header first.
- Then underneath that make a 2 column section. Create your side-box in the left column and make it small. Leave the right column empty.
- Make both sections sticky to the top. (You may have to adjust the top margins on the side box, to prevent it from scrolling up.)

So now you have your header and side-box. The only problem is that the content of every page is published under the sidebar, not next to it. To fix that you must adjust every single page, setting the margin of the top section of that page to -800 or something like that.

It works fine, but it is not a very elegant solution I think. Maybe someone still has a better idea?

 

[Alain]

Hi

Thanks for the tip.
I tried it but the Side-Box height has to be 100% of the viewheight.

Everything in the content-area moved below that so it doesnot really work.

May I need a plugin for that?

 

[Tonio]

I think it works, if you make the side-box part of your header.
Did you make a header-template?

Also, did you change the upper margins of the content of every page where the header and sidebox are visible?

 

[Alain]

I found a solution.
I did put it in a Footer Template

 

[Tonio]

Hey,
That's a clever solution! Thanks for the tip!

 

[Alain]

Thanks You are welcome!
One thing I encountered is that if the fixed Side-Box has to be on top of all Elements (z-index: 1000 or so.. ) then you can't access (click) Elements underneath anymore.
For this I added the following custom CSS to the Section-Element (ID: footer):

#footer {
    pointer-events: none;
}

 

[Tonio]

I am glad you were able to answer your own question, and help others at the same time !
Cheers!