One of the challenge in maintaining blogsite is creating design template for each use case. I’m planning to have a blog template, tutorial template, maybe screenshot template, and perhaps design gallery. All of them should be responsive using a chosen framework.
A Jekyll left sidebar menu using bootstrap framework
In this case, In short, I need: a button toggle to display or hide sidemenu.
Let’s see the show case in figure below:
Side menu always visible in medium screen. No button visible.
Side menu is not visible in small screen.
Side menu in small screen can be activated using toggle button.
There are many ways to display button. I like using FontAwesome character as button.
It means the button only appear in extra small screen.
This button always appear in small screen..
I also use
It will take all the grid space.
This is the menu part with
This menu part is visible in small, medium and larger screen,
but hidden in extra small screen using
#sidebar will lose its
and become visible.
Bootstrap is using 12 based grid. So I arrange the width for each screen device as below
Medium: 3 Left + 9 Right = 12 Total
Small: 4 Left + 8 Right = 12 Total
Extra Small: 11 Left + 12 Right = Become Top and Bottom
Boostrap is more than enough. No custom css trick required.
See in github