Mini Shell

<?php
function headermenu(){?>
<header class="main-header" style="max-height:60px;">
        <nav class="navbar navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <a href="index.php" class="navbar-brand" style="max-width:calc(100% - 50px);"><img src="../img/logo.png" alt="logo" class="img-responsive" style="margin-top: -12px;"></a>
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                <i class="fa fa-bars"></i>
              </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse pull-left mobile" id="navbar-collapse">
              <ul class="nav navbar-nav">
                  <li class="user user-menu"><a href="index.php"><i class="fa fa-book" ></i> My Course</a></li>
                   <li class="user user-menu"><a href="change-course.php"><i class="fa fa-exchange" ></i> Change Course</a></li>
                  <li class="user user-menu">
                    <!-- Menu Toggle Button -->
                    <a href="user.php">
                      <!-- The user image in the navbar-->
                      <i class="fa fa-user" ></i>
                      <!-- hidden-xs hides the username on small devices so only the image appears. -->
                      <span class=""><?php echo $_SESSION['username']; ?></span>
                    </a>
                  </li>
                   <li class="user user-menu">
                   <a href="logout.php">
                      <!-- The user image in the navbar-->
                      <i class="fa fa-power-off" ></i>
                      <!-- hidden-xs hides the username on small devices so only the image appears. -->
                      <span class="">Logout</span>
                    </a>
                  </li>
                <!--<li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Masters <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="courses.php"><i class="fa fa-book"></i> Courses</a></li>
                    <li class="divider"></li>
                  </ul>
                </li>-->
              </ul>
            </div><!-- /.navbar-collapse -->
            <!-- Navbar Right Menu -->
              <div class="navbar-custom-menu after_tablet"  style="padding-top: 9px;">
                <ul class="nav navbar-nav">
                  <!-- User Account Menu -->
                  <li class="user user-menu"><a href="index.php"><i class="fa fa-book" ></i> My Course</a></li>
                   <li class="user user-menu"><a href="change-course.php"><i class="fa fa-exchange" ></i> Change Course</a></li>
                  <li class="user user-menu">
                    <!-- Menu Toggle Button -->
                    <a href="user.php">
                      <!-- The user image in the navbar-->
                      <i class="fa fa-user" ></i>
                      <!-- hidden-xs hides the username on small devices so only the image appears. -->
                      <span class="hidden-xs"><?php echo $_SESSION['username']; ?></span>
                    </a>
                  </li>
                   <li class="user user-menu">
                   <a href="logout.php">
                      <!-- The user image in the navbar-->
                      <i class="fa fa-power-off" ></i>
                      <!-- hidden-xs hides the username on small devices so only the image appears. -->
                      <span class="hidden-xs">Logout</span>
                    </a>
                  </li>
                </ul>
              </div><!-- /.navbar-custom-menu -->
          </div><!-- /.container-fluid -->
        </nav>
      </header>
      <style>
        @media(max-width: 767px){
          .mobile{
            opacity: 1;
          }
          .after_tablet{
            opacity: 0;
          }
        }
        @media(min-width: 1025px){
          body .navbar-collapse.collapse.mobile{
            display: none !important;
          }
        }
        /*extend mobile menu to 1024*/
        @media (max-width: 1024px) {
        	.after_tablet{ display: none !important; }
  		    .navbar-header {
  		        float: none;
  		    }
  		    .navbar-left,.navbar-right {
  		        float: none !important;
  		    }
  		    .navbar-toggle {
  		        display: block;
  		    }
  		    .navbar-collapse {
  		        border-top: 1px solid transparent;
  		        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  		    }
  		    .navbar-fixed-top {
  		        top: 0;
  		        border-width: 0 0 1px;
  		    }
  		    .navbar-collapse.collapse {
  		        display: none!important;
  		    }
  		    .navbar-nav {
  		        float: none!important;
  		        margin-top: 7.5px;
  		    }
  		    .navbar-nav>li {
  		        float: none;
  		    }
  		    .navbar-nav>li>a {
  		        padding-top: 10px;
  		        padding-bottom: 10px;
  		    }
  		    .collapse.in{
  		        display:block !important;
  		    }
          /*for practice page*/
          #paginate{ padding: 0;overflow: hidden;position: relative; }
          #paginate > li:nth-child(2), #paginate > li:not(.page){ margin-top: 50px;padding: 0;width: 100%; }
          #paginate li.page{ margin-top:0;margin-right:0;min-width: 65px;text-align: center;position: absolute; }
          #paginate li.page:last-child{ right: 0; }
        }
      </style>
<?php
}
function footer(){?>
<footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Developed by</b> <a href="http://lankavirtualacademy.com/" target="_blank">Lanka Virtual Academy</a>
        </div>
        <strong>Copyright &copy; 2016 <a href="http://www.lankavirtualacademy.com/" target="_blank">Lanka Virtual Academy</a>.</strong> All rights reserved.
      </footer>
      <?php
}
?>