Bootstrap Sidebar Navigation issues
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm having some issues with my Bootstrap 3.3.6 sidebar navigation.

Problem #1 -
When in mobile view the content does not want to follow padding-top: 70px to be positioned lower under the fixed-top navigation bar. This occurs when the sidebar (left hand side) turns into standard Bootstrap top navigation.

Problem #2 -
Half of the sidebar navigation only shows up when the screen is not mobile/desktop. So somewhere in the Tablet category you only get half of the sidebar.

Problem #3 - Grids don't want to display 2 blocks in mobile view, instead it's only one block. As shown in Problem 1 image.

enter image description here

Here is the JSFiddle Link

And here is embeded code where you can see results (fullscreen) JS Fiddle Embeded Link Just go to Result's tab and play around trying to resize your browser and see what's happening.

Here is the code if you need it. Download Code

What do you want the navbar to do in the second image? Do you want it completely offscreen until the user hovers over it?
sguha over 3 years ago
@sguha In second image I want to show the sidebar, like it would show in desktop mode.
32x32 over 3 years ago
awarded to sguha

Crowdsource coding tasks.

1 Solution

Winning solution

Here are the changes I made for each issue:

Problem 1

Change navbar-fixed-top to navbar-static-top

Problem 2

Edited your custom CSS:

@media (min-width: 768px) {
  /*Allow main to be next to Nav*/
  .main {
    position: absolute; /*removed */
    width: calc(100% - 40px);
    /*keeps 100% minus nav size*/
    margin-left: 40px;
    margin-top: 20px; /*removed */
   float: right; /*removed */


 /*gives sidebar width/height*/
  nav.sidebar {
    width: 300px;
    height: 100%;
    margin-left: -160px; /* removed */
    float: left;
    z-index: 8000;
    margin-bottom: 0px;

Problem 3

Change all col-xs-12 to col-xs-6

Thats perfect. There is a small bug, when you're in the Tablet size with only 1 grid on the screen and hover over a link in navigation you will notice its glitching on the right side showing two grids instead of 1 how it was originally. Can you also change it that when its in Tablet size the grid fits 3 things across the screen, instead of 1 big one?
32x32 over 3 years ago
Updated the solution
sguha over 3 years ago
Awesome, everything works as it should :D
32x32 over 3 years ago
Eh, one more thing I just noticed. The reason fixed-top was there is that when in desktop view the navigation bar should stay where it is, and the rest of the content scroll... Since you removed it, it no longer is fixed. Any fix for that?
32x32 over 3 years ago
Thank you works, perfectly now :D
32x32 over 3 years ago