[Support request] Thema Sider: Vertical Heder

[Faton]

Hello dear team and users of generatepress
The length of the page should grow with the (vertical) header. Currently it is so that if I very many entries I in my header, that I must then scroll within the header seperat. I do not want to have that. I want it to grow with the header does. I hope you understand my issue.
I wish you all a new good year 🙂

[David]

Hi there,

can i see an example page on your site ?

And best wishes for 2023 to you 🙂

[Faton]

Hello David

This is the Site: de.ahlulbait.one (german site). I would like it to behave like the English site: en.ahlulbait.one

I wanted to switch to GeneratePress completely. But first with the german site. I want it to behave like the English page, that the page with the header grows with it.

On the English site I currently use the theme: https://wordpress.com/theme/confit

BTW: It is a site that provides factual education about various Islamic sects and what is good and wrong with these sects).

[Fernando]

Hi Faton,

I see. We need to move the Header content to the actual sidebar instead of just moving the Header there which is done in Sider. Are you still looking to use a different template? Or, are you good with Sider? Using a different template with a regular Header would be easier to alter.

Here’s a list of the first few things we need to do.

1. Go to Appearance > Customize > Layout > Sidebars, and set the sidebar layout to your preference. The sidebar should appear on all views. Based on your structure, the one you want to set is Sidebar / Content. Reference: https://docs.generatepress.com/article/sidebar-layout-overview/

2. Go to Appearance > Customize > Layout > Primary Navigation, and set the Navigation Location to Left Sidebar. Reference: https://docs.generatepress.com/article/navigation-location/

3. Create a Hook Element. Enable Execute PHP. Set the display rule location to Entire site. Then, add this code:

<?php generate_construct_logo(); ?>

Set the hook to generate_before_left_sidebar_content. Set the priority to 1.

Let us know how it goes.

[Faton]

Hello

I followed the steps you wrote. Unfortunately it doesn’t work properly. Regarding the GP Hook:
Execute PHP: PHP cannot be executed because DISALLOW_FILE_EDIT is defined.

I then followed this guide, but it still does not work.
https://docs.generatepress.com/article/disallow-php-execution/

BTW: Can I also move the sidebar all the way to the left?

[Faton]

Is there any way to disable the header completely? Except the mobile header. Because about the side list widget area I am much more flexible, I can then customize the left sidebar according to my needs. Only it must not look as separate as it currently does.

[Fernando]

To clarify first, are you okay with sider, or would you like to use a different template from the Site Library: https://generatepress.com/site-library/

We’ll see what steps to do depending on your choice.

[Faton]

Good morning, I would like to stay with Sider. I experimented around with the site today and found that GeneratePress is more powerful than I thought. I’ve always wondered why you offer GenerateBlocks when your theme doesn’t offer “FSE”.

I like to stay with Sider: How do I make it in Sider that the page grows with the left sidebar. And how can I edit the left sidebar with: Element Blocks, I would like to get that to work as well. Have already tried a few things but it remained experimenting around.

[Fernando]

I see. Thank you for Clarifying.

Let’s disable the Header first then go on from there.

1. Go to Appearance > GeneratePress.
2. Enable “Disable Elements” and “Elements” modules.
3. Create a Layout Element. Disable the Site Header, and set the Display rule location to entire site. Reference: https://docs.generatepress.com/article/layout-element-overview/#disable-element

Then, if you haven’t done this: https://generatepress.com/forums/topic/thema-sider-vertical-heder/#post-2480072 you may proceed to do it.

[Faton]

I have done all the steps. The design looks strange now.
https://de.ahlulbait.one

[Fernando]

Remove this code in Appearance > Customize > Additional CSS:

body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

Then, add this CSS:

@media (min-width: 1025px) {
div#left-sidebar {
    position:absolute;
    left: 0;
    top:0;
}

body{
    position:relative;
}

div#page {
    margin-left: 360px;
}
}

Alter the 360px to your preference.

In Appearance > Customize > Layout > Container, you can also alter your Container Width.

[Faton]

Unfortunately, the website looks even weirder now.

[Faton]

I have now adjusted so, although not the achieved effect I wanted to have, but no matter. I will not have so many elements that it starts to scroll.

.site-header {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 505%;
z-index: 300;
overflow: auto;
overflow-x: hidden;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
transition: .1s ease;
}

__________________

Now how do I edit the left sidebar with element blocks. Because right now I always go via Customize and then the widget area. But the block editor is way too small in the widget area. It is not possible to make reasonable changes.

[Fernando]

Is this still the link?: https://de.ahlulbait.one/

It doesn’t seem to be using the GP theme anymore. Viewing your site from my end a while ago, it seemed already almost similar to that layout.

To edit the sidebar widgets, you can go to Appearance > Widgets.

[Author]

Posts