[Resolved] move left sidebar container downwards

[Franz]

hello,

I have a page with a left-sidebar. I moved the wigdet-area downwards by using css, so the first wigdet is at the height of the upper border of the content container. But the problem is, that the sidebar container goes up to the header, so that the page title is not at the left-hand side of the page, but at the border of the sidebar container.
How can I move the sidebar containerdownwards, so that the upper border of the sidebar is at the same height as the upper border of the content area?

Thanks for your help.

Kind regards

Franz

[David]

Hi there,

can you share a link to a page where i can see the problem?

[Franz]

hi David,

you can access this page only as logged-in user, so I have provided the credentials of a user in the private section of this message.

Kind regards

Franz

[Elvin]

Hi Franz,

Consider removing this custom CSS:

.widget-area .widget:first-child {
    margin-top: 140px;
}

And only keep this one:

/* Linke Seitenleiste runternehmen*/
#left-sidebar {
	margin-top: 180px;
}

and do your tweaks there so you only have to maintain 1 CSS.

To be more accurate in suggesting a solution, can you share an image of how you want things to be laid it?

Perhaps you want something like this instead? https://share.getcloudapp.com/4guZOYmD

[Franz]

hi Elvin

I removed

.widget-area .widget:first-child {
margin-top: 140px;
}

with the result, that widget of sidebars are now placed too high, such as here

https://rechtskonform.ch/dienstleistungsangebot/angebot/

And it seems, that the code

/* Linke Seitenleiste runternehmen*/
#left-sidebar {
margin-top: 180px;
}

does not have any effect.

Your proposal on ‘getcloudapp’ is exactly what I want! Can you give me an advice how to get this?

Kind regards

Franz

[Elvin]

And it seems, that the code

/* Linke Seitenleiste runternehmen*/
#left-sidebar {
margin-top: 180px;
}

does not have any effect.

This CSS is meant to be adjusted in consideration to the 140px margin removed from the previous CSS.

Your proposal on ‘getcloudapp’ is exactly what I want! Can you give me an advice how to get this?

If this is the case then consider creating a Block Element – Page hero and place the breadcrumbs inside it along w/ a GB Headline Block containing a dynamic value for post title. 🙂

It’s basically making a simpler version of Leo’s demo here – https://www.youtube.com/watch?v=yq6VcgU3Ufg&t=37s

[Franz]

Great, this approach is the right one, everything is ok now. Many thanks for your support!

[Elvin]

No problem. 😀

[Author]

Posts