Twitter Bootstrap Question posted in

How to remove space in responsive nav bar?-Twitter bootstrap

I am trying to create a responsive Admin Panel. I have an element above each side menu 

<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Sales Reports</a>

I want that with minimizing side bar become invisible and these two element appears. It works however I can not remove the space between. How can I do it?

Note: I am open for every kind of suggestion and improvement.

Fiddle Link

body {
  font-family: 'Exo 2', sans-serif;
}

.nav-sidebar {
  margin: 80px -20px 20px 20px;
}

.nav-sidebar>li>a {
  padding: 20px 20px;
}

.main {
  margin-top: 50px;
  padding: 20px;
}

.placeholders {
  margin-top: 10px;
  margin-bottom: 30px;
}

.placeholder {
  margin-bottom: 20px;
  text-align: center;
}

.placeholder img {
  display: inline;
  border-radius: 50%;
}

a.icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .sidebar ul {
    max-height: 0;
    display: none;
    font-size: 0px;
  }
  .sidebar ul li {
    width: 100%;
  }
  a.icon {
    display: block;
    visibility: none;
    margin-top: 100px;
    padding-left: 10px;
  }
}
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">

<title>Your Own Admin</title>

<link rel="stylesheet" href="css/adminStyle.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">

<div class="row">
  <div class="col-sm-3 col-md-2 sidebar">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Sales Reports</a>
    <ul class="nav nav-sidebar" id="myTopnav">
      <li class="active"><a href="#">Sales Reports</a></li>
      <li><a href="#">Stats</a></li>
      <li><a href="#">Graphs</a></li>
      <li><a href="#">Users</a></li>

    </ul>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Performance Reports</a>
    <ul class="nav nav-sidebar">
      <li class="active"><a href="#">Performance Reports</a></li>
      <li><a href="#">Revenue</a></li>
      <li><a href="#">Countries</a></li>
      <li><a href="#">Spamers</a></li>

    </ul>

  </div>
  <div class="col-sm-9 col-md-10 main">
    <h1 class="page-header"><i class="fa fa-tachometer" aria-hidden="true"></i> Dashboard
    </h1>
    <div class="row placeholders">
      <div class="col-xs-6 col-sm-3 placeholder">
        <img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
        <h4>Label</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3 placeholder">
        <img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
        <h4>Label</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3 placeholder">
        <img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
        <h4>Label</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3 placeholder">
        <img src="images/graph.png" class="img-responsive" width="200" height="200" alt="">
        <h4>Label</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <h2 class="sub-header">Detailed Result</h2>
    <hr>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID#</th>
            <th>Detail 1#</th>
            <th>Detail 2#</th>
            <th>Detail 3#</th>
            <th>Detail 4#</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
          <tr>
            <td>234</td>
            <td>John</td>
            <td>Pentesting</td>
            <td>China</td>
            <td>90$</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    If I understood your question well, you want to remove the empty space between the two sidebars you have and maintain the empty space for the first one.

    https://jsfiddle.net/1k9sjkeb/12/

    .nav-top-sidebar {
  margin: 80px -20px 20px 20px; /* You can change the value of the first top margin to move the sidebar to where you want */
}


.nav-sidebar{
    margin: 0px -20px 20px 20px;
}

    And changing the class for the first sidebar

    <div class="col-sm-3 col-md-2 sidebar">
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Sales Reports</a>
           <ul class="nav nav-top-sidebar" id="myTopnav">
               <li class="active"><a href="#">Sales Reports</a></li>
               <li><a href="#">Stats</a></li>
               <li><a href="#">Graphs</a></li>
               <li><a href="#">Users</a></li>

           </ul>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;Performance Reports</a>
           <ul class="nav nav-sidebar">
               <li class="active"><a href="#">Performance Reports</a></li>
               <li><a href="#">Revenue</a></li>
               <li><a href="#">Countries</a></li>
               <li><a href="#">Spamers</a></li>

           </ul>

    This should do the trick 🙂

    Login or Signup to reply.
  2. 0

    In CSS you have give margin-top:100px which is causing huge spaces between another element, reduce the margin.

    @media screen and (max-width: 600px) {

  ...

    a.icon{

        display: block;
        visibility: none;
        margin-top: 16px; /* Adjust margin-top as much you like. */
        padding-left: 10px;

    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search