Fixed sidebar adjustment for mobile devices

Asked

Viewed 1,110 times

2

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

I need that when it is in a resolution less than 768px (Mobile) the menu is up and the content is down.

My code is this:: 

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 in larger resolutions for tablet and desktop it is perfect! I think it’s some change in css that I’m not getting to do!

twitter-bootstrap
  • 1

    You didn’t have to delete the original question and redo it. You just had to edit the other one. It was very difficult to find your profile and to know what had happened.

  • Funny Luiz, I’m sorry for the sincerity, but in your other question I edited it for you, moved the code, adjusted the examples, put the right tags in the question, and you delete the question and still open a new one using the wrong tag and putting a title similar to the old one. Does the FOLLOWING, moves the Bootply code to the Stackoverflow Snippet (edit your question for this), external links may eventually crash, which would render the question invalid for possible answers (just like I did in editing your other question).

  • @Guilhermenascimento sorry, I was a little lost on this site, but I think I already found myself! This my code is working the way I want for desktop and tablet, just not working for mobile! just need to adjust it for mobile!

  • I had already understood since the other question, the problem is that I avoid to answer something that is not clear soon in the question pq otherwise it is as if I answered something that was not asked :) tomorrow morning if no one has answered I answer, because now I am on the mobile, It gets tough, good night man

  • @Guilhermenascimento just have to thank you! Thank you! Good night! I’ll be waiting for your answer!

  • @Guilhermenascimento can help me friend?

Show 1 more comment

1 answer

2


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

According to the link navbar-Fixed-top:

A body spacing is required

The fixed navbar will override other content, unless you purchase padding to the top of the <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 believe you want to turn the menu on the left side into a fixed navbar at the top with a button to make the "toggle".

To do so create the navbar, as in the link: http://getbootstrap.com/components/#navbar-Fixed-top should look something like (I added an attribute id to avoid the css effect picking up on 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 the .content where your page content will be:

Using the @media

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

In the navbar-header had an effect of float which broke the appearance so I removed (only larger screens), the content will need a left margin for 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 body { padding-top: 70px; } on the fixed navbar, then we will 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>
<script src="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>

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.