Resolved

Order of components on Mobile

Polestar Theme started by patrickTheSailor Feb 3, 2021 2 replies
patrickTheSailor Feb 3, 2021 · 9:42 pm #15367

Hello,
I’m considering using Polestar; there’s just one question about the order in which the various components go to vertical on the mobile display.

I notice that when the display goes to mobile, the order in which the screen elements or components appear is:

  • Header
  • Mobile Menu
  • Page Contents
  • Sidebar Contents

What I need is to have the sidebar contents appear before the Page Contents on the mobile screen. The css in style.css looks neat but I can’t readily see a way switch the order of the page and sidebar. Please advise. Thank you.

Patrick

patrickTheSailor Feb 3, 2021 · 9:53 pm #15368

Hmmmm….
Looks like I may have figured this out myself….
It seems to work fine when I simply move the call to get_sidebar() in page.php from its original location which is directly before the call to “get_footer()” to directly after the call to “get_header()”.

Seems to work okay. Does this sound right? Thanks.

Patrick

Puro Support Puro Feb 4, 2021 · 10:05 pm #15373

Hi Patrick

Thanks for posting your question.

You can change the order of elements by moving the sidebar function. This should be done via a child theme, please, find a starter child theme for Polestar here.

You can also try the following at Appearance > Custom CSS or Customize > Additional CSS instead of making the PHP change:

@media (max-width: 768px) {
	.site-content > .polestar-container {
		display: flex;
		flex-direction: column-reverse;
	}

	#secondary {
		border-top: none;
		border-bottom: 1px solid #e6e6e6;
		padding: 0 0 50px;
		margin: 0 0 50px;
	}
}
3 posts