Site logo

Archived topic

move left sidebar container downwards

7 replies · Started by Franz on January 16, 2022

Viewing posts 1–8 of 8

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

Hi there,

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

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

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

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

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

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

No problem. :D

This archived topic is closed to new replies.