[Resolved] Sidebar Stack on on top of Content

[Mark]

Hi Tom,

Still rocking the GP theme!

Quick question, is it possible to stack the sidebar on top of the content. I know it is possible but wouldn’t know how. Can you help? Cheers.

[Leo]

Hi Mark,

Are you wanting your sidebar to be between header/navigation and the content? for both all devices?

Checkout generate_after_header and generate_inside_container hooks.
http://demo.generatepress.com/hook-locations/

[Mark]

Hi Leo,

On a mobile device instead of the sidebar been below the content box I need it on top.

Thanks

[Leo]

Give this CSS a shot:

@media (max-width: 768px) {
	.site-content {
		display: table;
	}
    	.site-main {
		display: table-footer-group; float: none;
	}
    	.sidebar {
		display: table-header-group; float: none;
	}
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Tom]

You can also use the Flexbox method (will accomplish the same thing): https://generatepress.com/forums/topic/change-order-on-mobile/#post-157121

[Mark]

Thanks guys,

Tom’s seems to work a little better than yours Leo. The padding or something seems to be off in yours. But again thanks for your help!

[Leo]

Glad we can help and thanks for the feedback 🙂

[Author]

Posts