This is a bootstrap layout question which not yet relates to Roots since I first want to make sure I got the right layout and design.
I’ve used the Bootstrap Offcanvas Sidebar Template as a starting point for a layout and fiddled with it til I’ve gotten it mostly as I intend for my design. Somewhere along my customisation I’ve lost my ways, or maybe rather misintrepeted some of the Bootstrap framework, since I’m still a rookie.
For you to see the code I’ve preparred a one page version on JSFiddle of the code as of now, which has the same looks and the same behavior (both the correct and faulty) as my own development code. Here it is.
However, there’s a couple of things I want to achive with my layout:
-
Responsiveness, not only the default Bootstrap way, but also a semi-adaptive design for small screens (xs aka smartphones) where a top navbar menu is pushed (or as of now hidden and exchanged) to a bottom navbar in the footer. Then the page title should take its former place centered in the top navbar. This is almost like I want it to, but still not quite, as the navbar menu when shown in the bottom navbar can’t be aligned horizontally, but as per Bootstrap default stacks vertically. Also the page title won’t come centered.
-
A sidebar page menu that goes offcanvas on small screens with an toggle button appearing. This works as intended, only that I can’t seem to get padding and sizing for all breakpoints to get a smooth responsivness and correct behaviour.
-
A couple of buttons (buttongroup for now) which should always align to the right. As of now they only do this on small screens.
Hopefully some of you who are more experienced than me can tell me why it doesn’t look and behave as per my intension.