Set fixed sidebar for mobile devices

Navigation
2

I made a layout with a fixed sidebar, everything is ok, but what is not working and when will I use it in mobile version (screens with resolution less than 768px).

I need it when it is at a resolution lower than 768px (Mobile) the menu is at the top and the contents below.

My code is as follows: 

html, body {
	height: 100%;
}
.container-fluid {
	height: 100%;
}



.sidebar-menu {
	height: 100%;
	background: #424c56;
	background-size: 100%;
	background-repeat: no-repeat;
	position: fixed
}
.content-wrapper {
	background: #090;
	float: right;
}
 @media(max-width:768px) {
	 
	 html, body {
	height: 0;
}
	 
	 .container-fluid {
	height: 0;
}
	 .content-wrapper {
	float: none;
}
	.sidebar-menu {
	height: 0;
	background: #424c56;
	position:static;
}
	
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container-fluid" style="margin:0; padding:0;">
  <aside class="col-md-3 col-sm-3 col-xs-12 sidebar-menu">ada
    <nav>
      <ul>
        <li>Quem Somos</li>
        <li>Quem Somos</li>
        <li>Quem Somos</li>
        <li>Quem Somos</li>
      </ul>
    </nav>
  </aside>
  <section class="col-md-9 col-sm-9 col-xs-12 content-wrapper">This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.

Make sure to keep all page content within the #page-content-wrapper.</section>
</div>

using this code, because at higher resolutions for tablet and desktop it is perfect! I think it's some css change I can not do!

    
asked by anonymous 05.02.2015 / 21:12

1 answer

2

To achieve the effect, you will have to use @media(max-width: 767px) { and @media(min-width: 768px) { to make the necessary adjustments.

According to the navbar-fixed-top link:

  

Spacing is required on the body

     

Fixed navbar will override other content unless you add padding to the top of <body> . Tip: By default navbar is 50px .   Add to your code

     

body {padding-top: 70px; }

So this is what will help with your overlap problem.

I think you want to turn the menu on the left side into a fixed navbar at the top with a toggle button.

To do this create the navbar, as in the link: link should get something like (I added an attribute id to avoid css effect pick up other navbars, if any): 

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top" class="bs-example bs-navbar-top-example" data-example-id="navbar-fixed-to-top">
    <div class="container-fluid navbar-collapse">
        ...
    </div>
</div>

Create .content where the content of your page will be:

Using @media

The% w / w would be the effect for larger screens, see that in navbar I limited to min-width: 768px and 300px I applied .content , you can adjust this as needed.

No margin-left: 300px had a navbar-header effect that broke the appearance so I removed (only larger screens), float would need a left margin for the content not to be below the navbar. 

@media (min-width: 768px) {
    #navbar {
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
    }
    #navbar div.navbar-header {
        float: none;
    }
    div.content {
        margin-left: 300px;
    }
}

As my comment at the beginning, we need to add content to the fixed navbar, so we'll add only when the size is less than 768: 

@media (max-width: 767px) {
    body {
        padding-top: 70px;
    }
}

The result should be something like: 

@media (min-width: 768px) {
    #navbar {
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
    }
    #navbar div.navbar-header {
        float: none;
    }
    div.content {
        margin-left: 300px;
    }
}

@media (max-width: 767px) {
    body {
        padding-top: 70px;
    }
}
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top" class="bs-example bs-navbar-top-example" data-example-id="navbar-fixed-to-top">
    <div class="container-fluid navbar-collapse">
        <div class="navbar-header">
          <button aria-expanded="false" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        <div aria-expanded="false" class="navbar-collapse collapse" id="bs-example-navbar-collapse-6">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="content">
    1<br>2<br>3<br>4<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
    
06.02.2015 / 20:14
Forcing the subclass [closed] EF context changed, but without updating database structure