Mobile Menu Going Bonkers

I'm getting a space at the top of the mobile menu that I am not getting on the desktop.laptop.
Also the menu items are either up too high (portrait) or way down (landscape) I can't find this style   <!-- START CELL MENU SECTION -------------------------------------------------------------------------->
    <div class="nav-menu nav-demo-1">
https://arise.plus

   <header class="navbar navbar-default navbar-static-top">
      <!--Client Header-->
      <!-- start: NAVBAR HEADER -->
      <div class="navbar-header">
         <a href="#" class="sidebar-mobile-toggler pull-left hidden-md hidden-lg" class="btn btn-navbar sidebar-toggle" data-toggle-class="app-slide-off" data-toggle-target="#app" data-toggle-click-outside="#sidebar">
            <i class="ti-align-justify"></i>
         </a>
         <a class="navbar-brand" href="#">
            <img src="/resources/images/Logos/Navbar45.png" width="106px" height="45px">
         </a>
         <a href="#" class="sidebar-toggler pull-right visible-md visible-lg" data-toggle-class="app-sidebar-closed" data-toggle-target="#app">
            <i class="ti-align-justify"></i>
         </a>
         <a class="pull-right menu-toggler visible-xs-block" id="menu-toggler" data-toggle="collapse" href=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <i class="ti-view-grid"></i>
         </a>
      </div>
      <!-- end: NAVBAR HEADER -->
      <!-- start: NAVBAR COLLAPSE -->
      <div class="navbar-collapse collapse">
         <ul class="nav navbar-right">
            <!-- start: MESSAGES DROPDOWN -->
               <li style="padding-top:2% ">
               <h2>Arise</h2>
            </li>
            <li class="dropdown current-user">
               <a href class="dropdown-toggle" data-toggle="dropdown">
                  <img src=<?php echo "'../AVATAR/images/".$_SESSION[SESSION_AVATAR]."'"; ?> > <span class="username" style="margin-top: 10px;">
                     <?php echo $username?>
                     <!-- start: MENU TOGGLER FOR MOBILE DEVICES -->
                     <div class="close-handle visible-xs-block menu-toggler" data-toggle="collapse" href=".navbar-collapse">
                        <div class="arrow-left"></div>
                        <div class="arrow-right"></div>
                     </div>
                     <!-- end: MENU TOGGLER FOR MOBILE DEVICES -->
                  </div>
               </a>
            </li>
         </ul>
      </div>
   </header>

Also a gap between logo and menu items on the portrait mode.