Add below meta tags in header section
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="js/jquery.min.js"></script>Bootstrap File
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
Main Menu Files
<link rel="stylesheet" type="text/css" media="all" href="css/webapplinks.css" />
<script type="text/javascript" language="javascript" src="js/webapplinks.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/color-theme.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
Look at: Example image
<body> Tag and end it on </body> before body..
<div class="wsmenucontainer clearfix">Paste below 2 DIV here
<div class="wsmenucontent overlapblackbg"></div> <div class="wsmenuexpandermain slideRight"> <a id="navToggle" class="animated-arrow slideLeft"><span></span></a> <a href="#" class="smallogo"><img src="images/yoursmalllogo.png" width="120" alt="" /></a> <a class="callusicon" href="tel:123456789"><span class="fa fa-phone"></span></a> </div>
===== Put navigation and all website code here =====
End DIV of "wsmnucontainer clearfix"
</div>
Look at: Example image
To change menu color please apply below class
Look at: Example image
Thank you for purchasing my website menu. If you have any questions that are beyond the scope of this help file,
please feel free to email via my user page contact form here. Thanks so much!