Site logo

Archived topic

Thema Sider: Vertical Heder

13 replies · Started by Faton on December 30, 2022

Viewing posts 1–14 of 14

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 :)

Hi there,

can i see an example page on your site ?

And best wishes for 2023 to you :)

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).

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.

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?

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.

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.

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.

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.

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.

Unfortunately, the website looks even weirder now.

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.

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.

This archived topic is closed to new replies.