boostrap menu for all devices || Responsive

    <!-- Static navbar -->
    <nav class="navbar-default top-nav-my navbar-static-top" role="navigation">
	<div id="menu-area" class="menu-area">
      <div class="container">
        <div class="navbar-header">
          <button style="width:100%;margin:5px 0 0 0;" type="button" class="navbar-toggle collapsed my-nav-collaps" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <div class="pull-left">
				<span class=""><a class="text-uppercase pull-left" href="#">menu</a></span>
			</div>
			<div class="pull-right my-pull">
				<span class="icon-bar my-icons"></span>
				<span class="icon-bar my-icons"></span>
				<span class="icon-bar my-icons"></span>
			</div>
          </button>

        </div>
        <div id="navbar" class="navbar-collapse collapse  ">
          <ul id="nav" class="nav navbar-nav my-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="fa fa-angle-right"></span></a>
              <ul class="dropdown-menu another-nav-my fy-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>

			<li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="fa fa-angle-right"></span></a>
              <ul class="dropdown-menu another-nav-my" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
      </div>
    </nav>



/*menu css*/
.menu-area{background-color:#2ECC71;}
/*my nav css*/
.navbar-default .my-nav > .active > a, .navbar-default .my-nav > .active > a:hover, .navbar-default .my-nav > .active > a:focus {
  background-color:#000;
  color: #fff;
}
.navbar-default .my-nav  li  a:hover {
  background: none repeat scroll 0 0 #000000;
  color: #fff;
}
.navbar-default .my-nav-collaps:hover, .navbar-default .my-nav-collaps:focus {
  background-color:#C1EA4E;border:none;
}

.navbar-default .navbar-toggle.my-nav-collaps{border:none;}
.navbar-default .my-nav .open .dropdown-menu > li > a {
  background:#2ECC71;padding:10px;
  color: #fff;
}
.navbar-default.top-nav-my .navbar-collapse, .navbar-default .navbar-form {
  border:none;
}
.navbar-default .my-nav .open .dropdown-menu > li > a:hover {
  background:#0000FF;
  color: #fff;
}


.navbar-default .my-nav > .open > a, .navbar-default .my-nav > a:hover, .navbar-default .my-nav > .open > a:focus {
  background-color:blue;
  color:#fff;
}
.dropdown-menu.another-nav-my{padding:0}

.navbar-default .navbar-toggle .icon-bar.my-icons{background-color:#fff;}
}