[Resolved] Sidebar to show below Title and Featured image

Hi there,

its not possible with CSS, as it cannot move an element ( eg a sidebar widget ) out of its parent ( e.g the sidebar ) and then insert somewhere else in a different container.

One method is to add the ToC where you want it on mobile e.g after the Entry Title.
And then we could provide some CSS to absolutely position it over the sidebar.
But thats not possible either in this case, as you have an advert in the sidebar and its position may vary….

the only method is to use Javascript.
Its not a method i personally like but you can give it a go.

1. Create a new Hook Element in Appearance > Elements.
2. Add this script to the hook text area:

<script>
function moveAfterElement(elementToMoveSelector, targetElementSelector) {
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    if (viewportWidth < 769) {
      const elementToMove = document.querySelector(elementToMoveSelector);
      const targetElement = document.querySelector(targetElementSelector);
      targetElement.parentNode.insertBefore(elementToMove, targetElement.nextSibling);
    }
  }

moveAfterElement('#block-12', '.entry-header');
</script>

3. set the Hook to wp_footer
4. set the Display Rules to suit your need.

Note, the function will only fire once on initial load, and it will move the widget below the entry-header if the screen size is below 769px.
IT won’t move back if you resize the browser….

I think i was having a weird day yesterday… as there are other options we could explore.

For example you could create a Page Hero:

https://docs.generatepress.com/article/block-element-page-hero/

Use that to display the Title / Featured and any other post meta above the fold.
If you make it 2 columns you can include a HTML block for the adscript.

Now with the rest of the site as it is, the CSS you used above will position the Sidebar between the hero and the content.

You’re welcome