[тнe randoм dυтcн gυy]

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]

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]

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/d5e885a0f9143094524e...8344fa.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/243b9835e368065e4357...f82214.png


When screen is smaller: https://i.gyazo.com/e264cf4b287a81bb4b52...7271bb.png

As you see the dashboard content is responsive. i want the same thing. but cant figure out how to.


https://i.gyazo.com/1521b0c24307ab05ce85...9531a1.png

[Rushax]

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]

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]

Updated 100% height for desktop version:
https://jsfiddle.net/rrd00a4c/1/

Code

@media (min-width: 992px){
    .nav-side-menu{
        height: 100vh;
    }
}

Don't forget to add in some of the JS for Bootstrap as I didn't put that in.

---

Yeah you would do for certain media queries for desktop:
Something like:

Code

.nav-side-menu{
top: -50px;
}

Then you would have to set it back to

Code

.nav-side-menu{
top: 0;

for mobiles as it sits on the top by itself and won't be visible otherwise.
}

---

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]

snip

Thanks for the help i got it working now.