+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Bootstrap Responsive content relative to sidebar (/showthread.php?tid=5580943)
Bootstrap Responsive content relative to sidebar - тнe randoм dυтcн gυy - Mar 21, 2017
Anyone here a little bit good with bootstrap? I'm working on something front-end (in wich I suck). How would I make the following content (div container) responsive relative to the sidebar?
Index: http://pastebin.com/4AwRALL5
app.css: http://pastebin.com/3Cy8PVx6
I've been messing with it for a while now, Can't seem to get it working properly.
Also i wasn't sure where to post this so..
* - Rushax - Mar 21, 2017
Can you explain what you mean a bit better? Not quite sure what you mean, but I'm experienced in Bootstrap & can help you with this.
Saved this as a JSFiddle so other people can see what you mean:
https://jsfiddle.net/41q09vju/
~Working on solution now..
* - тнe randoм dυтcн gυy - Mar 21, 2017
(Mar 21, 2017 11:33 AM)Rushax Wrote: Can you explain what you mean a bit better? Not quite sure what you mean, but I'm experienced in Bootstrap & can help you with this.
Saved this as a JSFiddle so other people can see what you mean:
https://jsfiddle.net/41q09vju/
~Working on solution now..
As you see here https://i.gyazo.com/d5e885a0f9143094524eab28cb8344fa.png the content is overlapping/ underlapping the navbar
The content should always be next to the sidebar like any other admin template you see on the internet. And when the screen is to small (when the navbar collapses it should just pull all the content to the left (So its bellow the menu)
Example other template full-size: https://i.gyazo.com/243b9835e368065e4357250184f82214.png
When screen is smaller: https://i.gyazo.com/e264cf4b287a81bb4b52e599837271bb.png
As you see the dashboard content is responsive. i want the same thing. but cant figure out how to.
https://i.gyazo.com/1521b0c24307ab05ce85a37ed09531a1.png
* - Rushax - Mar 21, 2017
Yeah I got what you meant after I took the time to made a JS Fiddle out of it.
Here is the solution:
https://jsfiddle.net/rrd00a4c/
Depending on the size of your PC, you might not be able to see the whole (large version) so copy and paste it out & you'll see it live.
It has 3 different views, mobile / ipad / desktop.
You had issues with the position:fixed on the sidebar, a height of 100% & not using the Bootstrap col-md- / col-sm- framework quite right.
~EDIT: Then for certain media queries add a height of 100vh which I forgot to add in so the sidepanel once fully open for desktop can go full height.
* - тнe randoм dυтcн gυy - Mar 21, 2017
(Mar 21, 2017 12:07 PM)Rushax Wrote: Yeah I got what you meant after I took the time to made a JS Fiddle out of it.
Here is the solution:
https://jsfiddle.net/rrd00a4c/
Depending on the size of your PC, you might not be able to see the whole (large version) so copy and paste it out.
It has 3 different views, mobile / ipad / desktop.
You had issues with the position:fixed on the sidebar, a height of 100% & not using the Bootstrap col-md- / col-sm- framework quite right.
Nice, That's almost how i want it. You think its possible to have the sidebar menu overlap on the top menu? So it looks like a whole one thing?
* - Rushax - Mar 21, 2017
Updated 100% height for desktop version:
https://jsfiddle.net/rrd00a4c/1/
Code
@media (min-width: 992px){
.nav-side-menu{
height: 100vh;
}
}Yeah you would do for certain media queries for desktop:
Something like:
Code
.nav-side-menu{
top: -50px;
}Code
.nav-side-menu{
top: 0;}
To be precise:
Code
.nav-side-menu{
top: -50px;
}
@media (max-width: 767px){
.nav-side-menu{
top:0;
}
}Updated the JS fiddle too with these changes.
https://jsfiddle.net/rrd00a4c/2/
* - тнe randoм dυтcн gυy - Mar 21, 2017
(Mar 21, 2017 12:14 PM)Rushax Wrote: snip
Thanks for the help i got it working now.