Sidebar Location

Hi,

It is possible for pages, you can choose a page template with left sidebar.

To set the page template, you need to edit the page and go to “Document” on top-left side, then under “Page Attributes”, select a “Template” with name “Page with left sidebar”.

Also, the content will load first on mobile even when the page has the left sidebar.

And for the blog posts, I will release a new update that will allow you to set the left sidebar for posts also.

@scriptstown That would be awesome. Looking forward to the update whenever you’ve got time. Thanks a lot ??????

P.S: I just tested the page template switch tip and it works. Thanks again

• This reply was modified 4 years, 4 months ago by Udegbunam Chukwudi.

@strictlyonlinebiz I have updated the theme with this new feature.

Now, you are able to change the sidebar layout for the blog posts. You can find this new setting in the theme customizer > “General Options”.

If you like this theme, then consider leaving a review. This will encourage us to improve the theme and add more features to the theme.

Thanks!

@scriptstown Wow! That was pretty fast. Thank you so much. It’s working just fine now.

P.S: I’ve left the review ??

@scriptstown Quick final question please. Please at what width does the theme collapse the sidebar on mobile devices. It displays like desktop theme on some tablets. Thanks

• This reply was modified 4 years, 4 months ago by Udegbunam Chukwudi.

@strictlyonlinebiz It’s 800px for the sidebar and 1024px for the menu.

The content is wrapped with columns__md_8. And, the sidebar is wrapped with columns__md_4.

Here, “md” is for medium devices (800px).

@media screen and (min-width: 800px) {
	.columns__md-4 {
		width: 33.33%;
	}
	.columns__md-8 {
		width: 66.66%;
	}
}

So, if you want to make it for large devices (1010px), then you can switch it to “lg” classes like .columns__lg-4 and .columns__lg-8.

You can look at the style.css file if you are familiar with CSS. Or, you can just replace all occurrences of “800px” with something large like “1024px” in style.css. The theme uses a minified version of stlye.css which is “stlye.min.css”.

Also, do the changes using a child theme or a plugin so it doesn’t get lost with updates.

• This reply was modified 4 years, 4 months ago by ScriptsTown.
• This reply was modified 4 years, 4 months ago by ScriptsTown.
• This reply was modified 4 years, 4 months ago by ScriptsTown.

@scriptstown Thanks a lot for the tip man. I’ll try and figure it out with the little I know of CSS ??.

Hey there, Good evening. I don’t know if I should revive this thread or open a new one but it’s kinda related.

The site renders fine on desktop and mobile but it would seem that when the sidebar is placed on the left side, in the html code the sidebar is loaded first before the content area.

For example

<div class=”sidebar”></div>
<div class=”content”></div>

instead of

<div class=”content”></div>
<div class=”sidebar”></div>

I hear some people say this affects SEO? How true is this?

I hope I’m making sense. I don’t know the right language to use

Hi,

I don’t think that will affect SEO since we are already using proper HTML5 semantic markup like the main tag for content and aside tag for the sidebar.

And, if you set the layout to left sidebar, the sidebar will come first both in desktop and mobile (in HTML). But, on the mobile, it will just show up after the content.

@scriptstown Thanks for the clarification sir. I’m at ease now ??????