I tried to find a solution to my problem but none matches my exact case.
My problem is the following: I am trying to add the Bootstrap 4 Navbar to my Page, which works fine - it's showing up. But it doesn't have any click events, I can't click the buttons or write something in the search field.
I tried to load the jQuery before loading the bootstrap.css file but it didn't work either.
This is the loading order in my Site.Master:
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/epadoc_Framework/EHR/Scripts/js/FontSize.js"></script>
<script src="/Scripts/global.js"></script>
<script src="/epadoc_Framework/EHR/Scripts/pk_script.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css"/>
It's the right Bootstrap version aswell.
Here is some default navbar to test if its working (it's just copied from Bootstrap):
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
And that is what it looks like in the header of the page:
As you can see it's showing up normally, but I just can't interact with it, I don't even get the hover effect when I mouseover the bar.
Any ideas what is going wrong here?
Try placing the .css in the head of the document like so.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
//Your content
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/epadoc_Framework/EHR/Scripts/js/FontSize.js"></script>
<script src="/Scripts/global.js"></script>
<script src="/epadoc_Framework/EHR/Scripts/pk_script.js"></script>
</body>
Related
I am working on an MVC application, and I am trying to add links to the navigation bar including a dropdown menu and a search form. But whenever I add the dropdown-items and the form to the navbar I am getting this error
An unhandled exception occurred while processing the request.
XmlException: '.', hexadecimal value 0x00, is an invalid character. Line 1, position 1.
AspNetCoreGeneratedDocument.Views_Shared__Layout.b__35_1() in _Layout.cshtml
When I remove the added code the program runs perfectly
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - eTickets</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/eTickets.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">eTickets</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i>Management</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"> <i class="bi bi-camera-reels"></i> Cinemas</a>
<a class="dropdown-item" asp-controller="Producers" asp-action="Index"> <i class="bi bi-headset"></i> Produers</a>
<a class="dropdown-item" asp-controller="Actors" asp-action="Index"> <i class="bi bi-person-square"></i> Actors</a>
</div>
</li>
<li class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i>Movies</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" asp-controller="Movies" asp-action="Filter" style="padding-right:25px;">
<input name="searchString" type="text" class="form-control" placeholder="Search movie..." />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
</form>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - eTickets - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
What could be the problem, I'm using bootstrap 5.1.3 I also added the popper.js package and also the bootstrap package but the error still pops up.
I have solved the problem, instead of using the div tag I replaced it with the ul tag
<ul class="navbar-nav flex-grow-1">
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i>Management</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"> <i class="bi bi-camera-reels"></i> Cinemas</a></li>
<li><a class="dropdown-item" asp-controller="Producers" asp-action="Index"> <i class="bi bi-headset"></i> Produers</a></li>
<li><a class="dropdown-item" asp-controller="Actors" asp-action="Index"> <i class="bi bi-person-square"></i> Actors</a></li>
</ul>
</li>
<li class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i>Movies</a>
</li>
and on the form I replaced the form tag with the div tag as follows
<div class="form-inline my-2 my-lg-0" asp-controller="Movies" asp-action="Filter" style="padding-right:25px;">
<input name="searchString" type="text" class="form-control" placeholder="Search movie..." />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
</div>
Refer to the https://getbootstrap.com/docs/5.1/components/dropdowns/
I have 3 partial views:
_Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rand</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://kit.fontawesome.com/d3898ff33d.js" crossorigin="anonymous"></script>
<style>
.menu-category {
display: none;
}
.nav-link-designed-for:hover .menu-category {
display: block;
}
</style>
#await RenderSectionAsync("Styles", required: false)
</head>
<body>
<partial name="_Navbar" />
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - RandApp
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
_Navbar
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" style="font-weight:600" asp-area="" asp-controller="Item" asp-action="Index">ANZA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav" style=" width: 35%; justify-content: space-evenly; text-transform: uppercase; font-weight: 600;">
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Men" asp-controller="Item" asp-action="GetData">Men</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Women" asp-controller="Item" asp-action="GetData">Women</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Kids" asp-controller="Item" asp-action="GetData">Kids</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Role" asp-action="Index">Role</a>
</li>
-->
<!--
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Admin" asp-action="Index">Admin Page</a>
</li>
-->
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
<div class="menu-category">
<partial name="_MenuCategory" />
</div>
</header>
_MenuCategory
<!--some random text-->
<h1>Everything is working fine</h1>
In Navbar view, i have navbar with nav-items: Men, Women, Kids. My goal is to render "_MenuCategory" partial view on these nav-items hover.
In _Layout view you can see i am using tags but i doesn't work, i tried also some js code, it doesn't work too.
In other views i am using #section Styles {} for css code and #section Scripts {} for js code and it works fine but in partial views none of them works.
Exactly what is the problem and how can i fix it?
So I am using asp.net razor pages and I want to pass a property from one of my page models to be used in the asp-route-id tag helper in the _layout page. I tried injecting the specific page model onto the _layout page and accessing it through #Model tag, when i use this and hover over the nav bar, the route id i want to show comes up, but when i click on it i get this error:
and if I use viewdata, it disappears after clicking on a nav item and becomes null.
_layout.cshtml(shared)
#model VescovererWebApp.Pages.AccountModel
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VescovererWebApp</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index"><img id="logo" src="~/Logo/vescoverer.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<partial name="_LoginPartial" />
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a id="cu" class="nav-link text-dark" asp-area="" asp-page="/Account" asp-route-id="#Model.currentUserID">Account</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Vescover" asp-route-id="#Model.currentUserID">Vescover</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Vescovered" asp-route-id="#Model.currentUserID">Vescovered</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Verify" asp-route-id="#Model.currentUserID">Verify</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - VescovererWebApp - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
<style>
#logo {
height: 40px;
width: 40px;
}
</style>
try to use AccountModel as a base class
public class VescoveredModel : AccountModel
or you can create interface IAccountModel
public class AccountModel:IAccountModel
and
public class VescoveredModel : IAccountModel
and change layout model
#model VescovererWebApp.Pages.IAccountModel
you have two chose:
1.with button
<form method="post" asp-page="Order" asp-page-handler="Details">
<input type="hidden" name="Id" value="#item.Id">
<input type="submit" value="Show" >
</form>
2.with tag a
add #addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers to _ViewImports.cshtml
and use
<a asp-page="/Supplier" asp-route-id="#item.Id">Click</a>
I am using admin lte for my dashboard however a strange issue with the drop down is its working in the inner pages but not the outter pages.
https://adminlte.io/
For My profile menu I am using
For example here it will work
http://localhost:57038/MISObjects/Search
But here it wont
http://localhost:57038/MISObjects
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!-- SEARCH FORM -->
<form asp-action="Search" asp-controller="MISObjects" method="post">
<div class="input-group input-group-lg">
<select id="searchType">
<option value="1">All Cases</option>
<option value="2">My Cases</option>
</select>
<input class="form-control form-control-navbar" type="search" id="search" name="search" placeholder="Case Number" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello #User.Identity.Name!</a>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-item dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fa fa-user-cog" style="font-size:24px;"></i>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a asp-action="Setup" asp-controller="Admin" asp-route-id="1" class="dropdown-item">
<i class="fa fa-users-cog mr-2"></i> Settings
</a>
<div class="dropdown-divider"></div>
#if (User.Identity.IsAuthenticated) {
<a asp-action="Logout" asp-controller="MISObjects" class="dropdown-item">
<i class="fa fa-sign-out-alt mr-2"></i> Logout
</a>
} else {
<a asp-area="Identity" asp-page="/Account/Login" class="dropdown-item dropdown-footer fa fa-sign-in-alt">Login</a>
<a asp-area="Identity" asp-page="/Account/Register" class="dropdown-item dropdown-footer">Register</a>
}
</div>
</li>
</ul>
But for some reason its not working on the main page. Juqery is loaded fine and there is no errors on the console when i debug as proven by the screen shot below
Here is my scripts section
<!-- jQuery -->
<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
<!-- Bootstrap 4 -->
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="~/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<script src="~/plugins/jquery-validation/jquery.validate.js" type="text/javascript"></script>
<script src="~/plugins/jquery-validation/additional-methods.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<!-- bootstrap color picker -->
<!-- Bootstrap Switch -->
<script src="~/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
<script src="~/font-awesome/js/all.js"></script>
<script src="~/font-awesome/js/brands.js"></script>
<script src="~/font-awesome/js/fontawesome.js"></script>
<script src="~/plugins/select2/js/select2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
#RenderSection("Scripts", required: false)
<environment include="Development">
<script src="~/js/site.js" asp-append-version="true" defer></script>
</environment>
<environment exclude="Development">
<script src="~/js/site.min.js" asp-append-version="true" defer></script>
</environment
Console Errors
There are no errors
For anyone else with the same issues I had a partial script being loading inside a view component which is not supported thus this was blocking the dropdown from working.
Do not use parialasync to load a component inside a another partial view.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
ok. Where to begin with. I have just purchased this nice theme which I am integrating into ASP.NET web forms.
So far so good the theme is working nice, However when I add more pages the menu and the drop down menus are not working.
I have a default.aspx and then when I call another page I see the menu but the menu is not working and the drop down menus are not working too.
What am I missing here? I am using master pages.
Here is the master page code.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Tutorial1.SiteMaster" %>
<%# Register Assembly="DayPilot" Namespace="DayPilot.Web.Ui" TagPrefix="DayPilot" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8">
<title>PhaseGroup Customer Administration Panel</title>
<link rel="shortcut icon" href="favicon.gif">
<!---CSS Files-->
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="css/tables.css">
<!---jQuery Files-->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.17.min.js"></script>
<script src="js/styler.js"></script>
<script src="js/jquery.tipTip.js"></script>
<script src="js/colorpicker.js"></script>
<script src="js/sticky.full.js"></script>
<script src="js/global.js"></script>
<script src="js/flot/jquery.flot.min.js"></script>
<script src="js/flot/jquery.flot.resize.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<link href="Styles/mGrid.css" rel="stylesheet" />
<!---Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<!--- HEADER -->
<div class="header">
<a href="dashboard.html">
<img src="../img/logo.png" alt="Logo" /></a>
<div class="styler">
<ul class="styler-show">
<li>
<div id="colorSelector-top-bar"></div>
</li>
<li>
<div id="colorSelector-box-head"></div>
</li>
</ul>
</div>
</div>
<div class="top-bar">
<ul id="nav">
<li id="user-panel">
<img src="../img/nav/usr-avatar.jpg" id="usr-avatar" alt="" />
<div id="usr-info">
<p id="usr-name">Welcome back, Michael.</p>
<p id="usr-notif">You have 6 notifications. View</p>
<p>PreferencesProfileLog out</p>
</div>
</li>
<li>
<ul id="top-nav">
<li class="nav-item">
<a href="../Products/ProductDetails1.aspx">
<img src="img/nav/dash-active.png" alt="" /><p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="analytics.html">
<img src="img/nav/anlt.png" alt="" /><p>Analytics</p>
</a>
</li>
<li class="nav-item">
<a href="tables.html">
<img src="img/nav/tb.png" alt="" /><p>Tables</p>
</a>
</li>
<li class="nav-item">
<a href="calendar.html">
<img src="img/nav/cal.png" alt="" /><p>Calendar</p>
</a>
</li>
<li class="nav-item">
<a href="widgets.html">
<img src="img/nav/widgets.png" alt="" /><p>Widgets</p>
</a>
</li>
<li class="nav-item">
<a href="grid.html">
<img src="img/nav/grid.png" alt="" /><p>Grid</p>
</a>
<ul class="sub-nav">
<li>12 Columns</li>
<li>16 Columns</li>
</ul>
</li>
<li class="nav-item">
<a href="filemanager.html">
<img src="img/nav/flm.png" alt="" /><p>File Manager</p>
</a>
</li>
<li class="nav-item">
<a href="gallery.html">
<img src="img/nav/gal.png" alt="" /><p>Gallery</p>
</a>
</li>
<li class="nav-item">
<a href="icons.html">
<img src="img/nav/icn.png" alt="" /><p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="img/nav/err.png" alt="" /><p>Error Pages</p>
</a>
<ul class="sub-nav">
<li>403 Page</li>
<li>404 Page</li>
<li>503 Page</li>
</ul>
</li>
<li class="nav-item">
<a href="typography.html">
<img src="img/nav/typ.png" alt="" /><p>Typography</p>
</a>
</li>
</ul>
</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</form>
</body>
</html>
For starters, have you checked your debugger on the browser and are there any errors?
You're loading a lot of scripts and jquery stuff. The chances of a conflict are pretty high.
what's your css for the drop down menus look like? Are they jquery or pure css? By the structure looks like jquery.
Theres some stuff I don't like what you're doing there but it won't stop them from working. Anyway I digress..script errors?
It's likely working on one page and not others because your paths are wrong.
<script src="js/jquery-1.7.1.min.js"></script>
should be
<script src="/js/jquery-1.7.1.min.js"></script>
and so on for the other scripts and style references. Note that src="js is now src="/js. The / takes you back to the site root.
Without it, it will look in the current directory for a sub directory named js... but since you want the folder at the root of your project named js, you need to use /js.