I have this simple html code am working on and I seem not to find the reason why the menu is not showing in mobile view. I have gone through the code over and over again Could someone please help me figure out what am missing here.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<!-- CSS Files comes here -->
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body class="blue">
<div class="preloader"></div>
<!--Background -->
<!-- image is set in the CSS as a background image -->
<div class="backgroundcover"></div>
<!-- End Background -->
<!-- Start Header -->
<header class="header" id="home" class="navbar navbar-inverse navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">home3</span>
<span class="icon-bar">home2</span>
<span class="icon-bar">home1</span>
</button>
<!-- Your Logo -->
<a href="../" class="navbar-brand"><img src="image/logo1.png" alt="IDAS" /></a>
</div>
<!-- Start Navigation -->
<nav class="collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation">
<ul class="nav navbar-nav menu">
<li>
<a href="#main">Home</a>
</li>
<li>
<a href="#features">Our Goals</a>
</li>
<li>
<a href="about.html#features">Fund Process</a>
</li>
<li>
<a href="#gallery">Competition</a>
</li>
<li>
<a href="#impFeature">Partners</a>
</li>
<li>
<a href="#slider">News & Events</a>
</li>
<li>
<a href="#footer">Contact Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right header-button">
<li>
<button type="button" class="btn btn-primary">Submit Proposal</button>
</li>
</ul>
</nav>
</div>
</header>
<!-- End Header -->
</body>You need to use jquery.min.js and bootstrap.min.js and proper nav markup for bootstrap. Also copy the glyphicons fonts folder and paste into your root directory.
Use below code, hope this will work for you.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<!-- CSS Files comes here -->
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body class="blue">
<div class="preloader"></div>
<!--Background -->
<!-- image is set in the CSS as a background image -->
<div class="backgroundcover"></div>
<!-- End Background -->
<!-- Start Header -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand"><img src="image/logo1.png" alt="IDAS" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav menu">
<li>
<a href="#main">Home</a>
</li>
<li>
<a href="#features">Our Goals</a>
</li>
<li>
<a href="about.html#features">Fund Process</a>
</li>
<li>
<a href="#gallery">Competition</a>
</li>
<li>
<a href="#impFeature">Partners</a>
</li>
<li>
<a href="#slider">News & Events</a>
</li>
<li>
<a href="#footer">Contact Us</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right header-button">
<li>
<button type="button" class="btn btn-primary">Submit Proposal</button>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- End Header -->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</body>
</html>
