I'm struggling to make my Bootstrap drop down menu function properly. Nothing happens when I click on the link, no dropdown appears. I've set up my nav bar in a master page and have spent hours trying to troubleshoot it without success...
This issue is occurring in an application I'm developing in VS2013 Pro, using ASP.NET/C# 4.0. I've tested it in multiple browsers - Chrome, IE, Firefox - and tried different configurations of JQuery min and main, also placing them at various positions within the HTML document. Despite trying every possible combination, I haven't been able to resolve the problem. I've checked the browser inspectors for errors but couldn't find any. I modified the navbar code based on suggestions from other posts, but I've hit a dead end.
When I ran my code in Fiddlr, it worked perfectly fine. However, the same code doesn't work at all when placed in the master page. Here's the code snippet from the master page:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/EMS/EMSDefault.master.cs" Inherits="The_SumTechnology_Project.EMS.EMSDefault" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
<title>Matt's Test</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="background-color: transparent;">
<form id="form1" runat="server">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" style="color: white;">SumTechnology EMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Sites
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li>
<a href="#">Buildings</a>
</li>
<li>
<a href="#">Meters</a>
</li>
<li>
<a href="#">Data</a>
</li>
<li>
<a href="#">Reports</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Account</a>
</li>
<li>
<a runat="server" href="#" title="Manage your account">Log Out</a>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>