Hello everyone …
I am using the architect theme:
I would like to move the sidebar from the right to the left. Also, when one resizes the browser window to the smaller size, I would like this sidebar to appear before the content. Currently it is displayed after.
What would I need to do to achieve this? Many thanks!
The unfortunate downside of using a template is you are sort of locked in to how the programmer sets it up and you have to understand their programming style.
As quick look at the code shows that you can go to _layouts/default.html. Move the <aside>...</aside> block above the <section id="main-content"> and the code will move to the left.
Going to _sass/jekyll-theme-architect, I see the background is an image, so you will want to flip it horizontally using a basic image editor. You will see all the styles there if you search for sidebar and unfortunately, I do not have a lot of time to play with it and help you get it fully set up.
As for moving the sidebar before the content, I really think you would be better served creating a CSS Grid and placing the content into the correct area and doing away with all the floats used for the layout now (at least for the main content).
Unfortunately, moving <aside>...</aside> block above <section id="main-content"> did not move it to the left at all. It stayed on the right side and it got squeezed together with main content in the middle of the screen.
Sorry, that was my bad. You need to move the <aside>...</aside> code above the <section>...</section> code. You also, need to modify _sass/jekyll-theme-architect.scss and modify the aside#sidebar code to float:left; just like the code below:
aside#sidebar {
float: left;
width: 200px;
min-height: 504px;
...
}
Now I got this:
Anyway, it looks like this not that trivial to change so I’ll leave the sidebar where it is. But I really appreciate your help!
Yeah. Honestly if you convert it too a CSS Grid, you can get everything you are looking for, but it would be too much effort for me to help you re-write that. Sorry
