Building a Website like this with GP

Hi there,

the Menu and Logo option could be quite simple.
It would require some CSS but the basics could be achieved like so:

1. Create 2 x new Menus.
the first menu should be empty and the locations set to the Primary Navigation.
the second menu with out items will be located in the Off Canvas Panel.

2. In Customizer > Layout > Primary Navigation set the Navigation to Float Left.

This will place the Off Canvas Hamburger to the Left and Site Branding/Logo to the right.

The Static Sidebar content area is a lot more complicated to do. My thoughts would be something like a Side Bar that is given a fixed position to occupy that side of the screen.

@David

Thank you very much. :)

I will try to implement your suggestion about the Menu and Logo option and get back to you.

Thanks also for the idea with The Static Sidebar. How could we assign a fixed position to a sidebar? Any ideas about that?

Thank you!

Tricky one. This would be my approach:

1. set the Post/Page content container to Full Width:
https://docs.generatepress.com/article/content-container/

Note this removes all of the content padding, so your would have to build the content using something like GeneratBlocks to add back in the content padding where you need it.

2. Set the Left Sidebar to display.

3. Now some CSS to fix the position of the Left Sidebar and Keep the Content area in place:

@media(min-width: 769px) {
  #left-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #f00; /* color added for visual aid */
  }

  #primary {
    margin-left: 30%; /* matches width of sidebar */
  }
}

4. Use a Header Element, without any hero content, to add create the Merged Transparent Header effect.

https://docs.generatepress.com/article/header-element-overview/

Thats the basics of it.

@David

Thank you very much, but somehow it does not work. Please look for yourself if you have time and desire. :)
The credentials are in the Private Information field.

Is there any other way to make this work?
Is it possible to include the video also in the sidebar with your suggestion?

Thank you.

Few things.

1. Make sure the % value in this line of CSS matches your sidebar width:

margin-left: 30%; /* matches width of sidebar */

Currently your sidebar is set to 25%.

2. Set the Customizer > Layout > Container --> Separating Space to 0

3. Add some padding to the top of your sidebar to avoid it overlapping the site header:

#left-sidebar {
  padding-top: 100px;
}

4. Change the Customizer > Colors > Sidebar Widgets - you can set the background to match the sidebar colors you have set in the above CSS.

5. Adding Video - that depends... if its a background to the Sidebar then it will take some custom work. This article explains how to add video background to a Header Element:

https://docs.generatepress.com/article/page-hero-background-video/

The same premise applies to a sidebar but classes would need to be changed.

@David

Thank you very much! You have helped me a lot. :)

You're welcome