Make top of sidebar start at the same level as the page content after title

Hi there,

Is it possible to have the top of the sidebar at the same vertical level as the page content after the title? I have been kind of hacking this by creating a padding to the top of the sidebar. But then on mobile there is a gap. I could do a media thing in css, but I was wondering if there was another way.

The problem w/ custom CSS is that it's fixed. It doesn't take into account the variable length of the titles. If one of the posts have titles that spans to 2 lines then the fixed value you've placed will be wrong.

You'll need custom JS for this but that's out of our scope.

Could it involve moving the page/post title outside of the content so it ran the full width of the container?

That could work.

Consider using a header element to place your title on so the content area's contents are on the top of the line, so it lines with the sidebar.

Thanks!

So I created a header element with this as the contents:

<header class="entry-header">
<h1 class="entry-title" itemprop="headline">{{post_title}}</h1> </header>

Is that the proper way? It seems I need all of that to match the theme.

And is it correct that I then need to use the element padding option to get it to be properly aligned on the left side?

Here is a problem, though... On pages where I have checked the Disable Elements> Content Title, my newly created Header Element still shows. I don't want to have to add an exception for each one of those pages. That seems to defeat the purpose of the Disable Elements feature.

What do you recommend?

You don't have to add <header class="entry-header">.

<h1 class="entry-title" itemprop="headline">{{post_title}}</h1> should be enough.

And is it correct that I then need to use the element padding option to get it to be properly aligned on the left side?

Yes you may have to use that if you want to move the page hero contents further to the right.

Here is a problem, though… On pages where I have checked the Disable Elements> Content Title, my newly created Header Element still shows. I don’t want to have to add an exception for each one of those pages. That seems to defeat the purpose of the Disable Elements feature.

I'm not exactly sure why you need Disable elements for this.

Disable Element's purpose is to disable the theme default of a specified element. But that's already done when you use template tags like {{post_title}} because template tags disable the theme's default "content title" and re-add it inside the Header element.

Now if you want stop the header element with a title on some pages, then you really must use Display Rule exclusion on the Header Element so it doesn't display on excluded pages.

You don’t have to add <header class="entry-header">.

<h1 class="entry-title" itemprop="headline">{{post_title}}</h1> should be enough.

So does that mean my page won't have a <header> section? That's ok?

Now if you want stop the header element with a title on some pages, then you really must use Display Rule exclusion on the Header Element so it doesn’t display on excluded pages.

This is what I was talking about. Before I tried using a Header Element to move the post title to a different area I had some pages, that because of their design, I had used the disable tick box to remove the post title. (It's kind of confusing because they are called element even though they aren't identical with the elements we can create) So now, if I am understanding correctly, with this new Header Element, that check box to remove the post title on the individual page is ineffective because of my new header block.

Thanks!

So does that mean my page won’t have a <header> section? That’s ok?

GP pages normally have <header id="masthead"...> already. It's usually the one holding your menus.

So now, if I am understanding correctly, with this new Header Element, that check box to remove the post title on the individual page is ineffective because of my new header block.

Yeah it won't work. The disable element feature only works for parts of the theme that are not modified by Block, Hook, or Header Element.

Thanks so much!!!

No problem. Glad to be of any help. :D

Hello!

I just discovered a problem with the method I have used...

But that’s already done when you use template tags like {{post_title}} because template tags disable the theme’s default “content title” and re-add it inside the Header element.

I'm using Modern Event Calendar. On the pages that display a single event, GP isn't removing the h1 for the page. I'm guessing this is because the h1 for these pages has the class mec-single-title. So I end up with the title of the page appearing twice. Once because of the new element and once as part of the regular heading. Normally I would just fix this with css (hiding the mec-single-title class) but I'm guessing it's not considered good markup to have two headings on a page.

For now I've just made an exception for the heading element so it doesn't appear on events. But is there a way I can get GP to treat the event headings the same way it treats the regular page headings (i.e. remove them when there is an element that replaces the heading)?

Thanks! Hope that makes sense.

This is quite a while back. I'm not exactly sure about the details but if Modern Event Calendar creates its own page template then it won't the titles of the events pages like regular pages because it renders titles differently. But I can't be 100% sure about this.

(TBF, it was only a month and a half ago 😁 but I guess that's a long time in the interwebs!)

I also have a podcast plugin that (I thought) uses a custom template to create those pages and they play well with the element (meaning the native title is moved, not duplicated) so I was hoping there could be a fix.

Thanks!

Can you link us again to the site in question? This topic is marked resolved so if there's any information added on the private information text field, it automatically gets wiped.

If I can re-inspect the page, I can see the structure of the events pages. But from what you've said, the h1 is most likely generated by the plugin. (let me check to be sure though. lol)

This topic is marked resolved so if there’s any information added on the private information text field, it automatically gets wiped.

Oh, that's good to know. Makes some sense.

I've checked the site and yes, the h1 is coming from Modern Events Calendar.

See here - https://share.getcloudapp.com/v1uYgKWP

So yeah, the theme's settings can't do anything with it. :D

Thanks!