Offset issue

by Marco Messa

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2"></script>
<div id="pagina" class="container-fluid">
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Navegação</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" target="_blank">
        <img alt="" src="/Compartilhado/Images/logo.png" height="20" />
      </a>
      <a class="navbar-brand" href="/PM1.MVC/">
                    Projeto Modelo
                </a>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-envelope-o fa-fw"></i>
          <span class="badge">42</span>
          <i class="fa fa-caret-down"></i>
        </a>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-usuario">
          <li><a href="#" data-toggle="modal"...

CSS

.menu4 ul li a {
  cursor: pointer;
}

.sidebar .sidebar-nav.navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}

.sidebar ul {
  width: 100%;
}

.sidebar ul li {
  border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
  background-color: #eee;
}

.sidebar .arrow {
  float: right;
}

.sidebar .fa.arrow:before {
  content: "\25BA";
}

.sidebar .active>a>.fa.arrow:before {
  content: "\25BC";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: 0!important;
}

.sidebar .nav-second-level li a {
  padding-left: 37px;
}

.sidebar .nav-third-level li a {
  padding-left: 52px;
}

@media(min-width:768px) {
  .menu4 {
    width: 250px !important;
  }
  .sidebar {
    z-index: 1;
    position: absolute;
    margin-top: 51px;
  }
  .navbar-right li {
    margin-left: auto;
  }
}

@media(max-width:768px) {
  .menu4 {
    width: auto;
  }
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 100%;
  }
  .navbar-right li {
    float: left;
  }
}

.navbar-right {
  margin-right: 0 !important;
}

JavaScript

$(document).ready(function() {
  /* BootStrap */
  $(".menu4").addClass("navbar-default sidebar navbar-collapse").attr("role", "navigation");
  $(".menu4").addClass("navbar-collapse collapse in");
  $(".menu4").attr("aria-expanded", "true");
  $(".menu4 ul").addClass("nav");
  $(".menu4 ul ul").addClass("nav-second-level");
  $(".menu4 ul ul ul").addClass("nav-third-level");
  $(".menu4 li.itemPai a:not(.isParent)").append('<span class="fa arrow"></span>');
  // Plugin
  $('.menu4').metisMenu();
});