USer - GP Menu Code

by Shankar

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Mixer Data</title>

    <!-- Bootstrap Core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <!-- <link href="css/bootstrap-editable.css" rel="stylesheet"> -->
    <link href="css/normalize.css" rel="stylesheet">
    <!-- <link href="bs.css" rel="stylesheet"> -->
    <!-- <link href="css/jquery-ui.css" rel="stylesheet"> -->


    <link rel="stylesheet" type="text/css" href="css/shield/all.min.css" />

    <!-- Custom Fonts -->
<!--     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-select.css">
 -->
     <!-- <link rel="stylesheet" href="<!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- <link href="css/reset.css" rel="stylesheet"> -->

    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        margin: 20px; /* Header gap at top */
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }


@media screen and (min-width: 767px) {

    .navbar .dropdown-menu:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  position: absolute;
  top: -6px;
  right: 18px;/*Place arrow on left [Can be moved to Center By increase]*/
}
}

#adminMenu {right: auto}
#adminMenu::before {left:12px;right:auto}
#adminMenu::after {left:13px;right:auto}


.footer{
  width:100%;
  background-color:#793697;
  color:#fff;
 ...

CSS

/*     
 GP menu CSS code

.navbar-brand {
  padding: 0;
  margin:0;
  color:#E8CE0E;
}
.navbar-header a.navbar-brand {
  color:#E8CE0E;
}

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background: #151515;
  padding: 5px 0;
  padding-bottom: 0;
}

 .navbar-nav{
  margin-top: 0px;
 }

.navbar-nav>li{
  margin-left: 35px;
  padding-bottom: 28px;
}

.navbar-fixed-top .navbar-nav > li > a {
  padding: 5px 12px;
  margin: 0;
  border-radius: 3px;
  color: #fff;
  line-height: 24px;
  display: inline-block;
}

.navbar-fixed-top .navbar-nav > li > a:active,
.navbar-fixed-top .navbar-nav > li > a:hover{
    background-color: #E8CE0E;
  color: #fff;
}

.navbar-fixed-top {
  border: none;
}

.navbar-fixed-top .navbar-brand {
  font-size: 36px;
  line-height: 50px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav > .active > a,
.navbar-fixed-top .navbar-nav > .active > a:hover,
.navbar-fixed-top .navbar-nav > .active > a:focus,
.navbar-fixed-top .navbar-nav > .open > a,
.navbar-fixed-top .navbar-nav > .open > a:hover,
.navbar-fixed-top .navbar-nav > .open > a:focus {
  background-color: #E8CE0E;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu {
  background-color: #FFF;
  color: #000;
  /*background-color: #FFF;*/
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  border:0;
  /*-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  border: 0;
  padding: 0;
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
  left: 0;*/
}

.navbar-fixed-top .navbar-nav .dropdown-menu:before{
  position: absolute;
  top:0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li > a {
  /*padding: 8px 15px;*/
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:hover > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li:focus > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li.active > a {
  background-color: #E8CE0E;
  color: #000;
}

.navbar-fixed-top...

JavaScript

/*


<header id="header">
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div style="color:#FF0000;text-align:right;padding:0px;margin:0px;">kjhsdkfh sdfhsdf</div>
            <!-- Brand and toggle get grouped for better mobile display -->10
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="#">Mixer Data Automation</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                 <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li class="dropdown" id="adminMenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="active"><a href="">Colors</a></li>
                            <li><a href="">Chemicals</a></li>
                            <li><a href="">Users</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Report</a>
                    </li>
                     <li>
                        <a href="#">Logout</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
   ...