sidebar menu below full width header-div

[ruitertje]

Hi,

I have been searching for a solution to have a responsive full-width image in a header-div and
a left sidebar-menu that stays underneath the header.
When on small screens the menu should toggle in and out, covering the content below the header.

All examples I found use a position:fixed for the sidebar covering-up the header for a part.

I am using w3.css and am experimenting with w3-hide-small with no luck.

Any hint?

 

regards

 

[ruitertje]

I have come this far:

http://w3webseiten.eu/

What is missing is the menu getting to (display:none), the moment the width gets medium or small.

[edit]

Of cause, mediaqueries  . . .

Now I will make the menu get over the content, then I am at the same point that the examples had
I used before where the menu is positioned fixed.
Putting the problem in words is a part of the solution!
 

regards.

Edited December 6, 2019 by ruitertje