I'm new in asp and I'm having trouble using navbar collapse. It works fine in homepage(AnonymousTemplate), but when I logged in navbar collapsed is not working(not expanding when clicked).
Here's is my code. I'm new here so please be gentle. Sorry for the question.
Thanks for anyone who will answer, it will be greatly appreciated.
In here it works.
In here it doesn't work.
Here are my script and html.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/wow.min.js" type="text/javascript"></script>
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Default.aspx"><asp:Image ID="Image1" runat="server" ImageUrl="~/images/service/logo.png"></asp:Image></a>
</div>
<div runat="server" class="collapse navbar-collapse navbar-right">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a href="HowItWorks.aspx" >How it works?</a></li>
<li>Contact us</li>
<li class="dropdown">
About us <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav">
<li>My profile</li>
<li><a href="AdvancedBooking.aspx" >Advanced Booking</a></li>
<li>Transaction History</li>
<li class="dropdown">
About us<i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
<li><asp:LoginStatus runat="server" /></li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</nav>
Try to use an unique name to the other dropdown menu and link the other data-toggle to it like this:
<AnonymousTemplate>
<ul class="nav navbar-nav">
<li>Home</li>
<li><a href="HowItWorks.aspx" >How it works?</a></li>
<li>Contact us</li>
<li class="dropdown">
About us <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav">
<li>My profile</li>
<li><a href="AdvancedBooking.aspx" >Advanced Booking</a></li>
<li>Transaction History</li>
<li class="dropdown2">
About us<i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Our Customers</li>
<li>Our Truckers</li>
<li>Our Mission</li>
<li>Our Vision</li>
</ul>
</li>
<li><asp:LoginStatus runat="server" /></li>
</ul>
</LoggedInTemplate>
OK, after many tests I finally got my answer. I changed:
<script src="js/bootstrap.min.js" type="text/javascript"></script>
to:
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
Add "/" at the start to locate it at the root folder. Sorry if this one is a silly mistake. I only started 1 month in asp.net. I am posting this answer for anyone who will face this issue too.
-RobM
Related
i have a Bootstrap-Navbar on a ASP-Page. The Navbar ist included in a MasterPage and working fine with all the sites in root-Directory.
Some Pages with Login-Functionality are in an admin-Folder. These Pages use the same MasterPage, but when beeing on such a page, the Navbar isn't collapsing when clicking on a MainMenu-Item. The only thing that happens, is in the adress-box in the browser is a "#" appearing at the end.
Can someone help me solving this Problem ?
Greetings
Gregor
<nav class="navbar navbar-fixed-top" role="navigation" style="background-color:#286090;width:100%;z-index:10;">
<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" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i></li>
<li>
Serien
<ul class="dropdown-menu multi-level">
<li>Serien-Diary</li>
<li>Nicht-Beendete</li>
<li>Warteliste</li>
<li>Serien-Sichtung anlegen</li>
<li>Serien-Logo hochladen</li>
<li>DB Chronologie</li>
<li>Sichtungs-Chrono</li>
<li>Serien-Daten</li>
<li>Empfehlungen</li>
</ul>
</li>
<li>
Filme
<ul class="dropdown-menu multi-level">
<li>Film-Diary</li>
<li>in DB anlegen</li>
<li>DB Chronologie</li>
<li>Film-Sichtung anlegen</li>
<li>Empfehlungen</li>
<li>Liste Filtern</li>
<li>DVD's</li>
<li>BluRay's</li>
<li>
FILTERN<b class="caret"></b>
<ul class="dropdown-menu">
<li>
FSK
<ul class="dropdown-menu">
<li>Beschlagnahmen</li>
<li>SPIO/JK</li>
<li>Liste A</li>
<li>Liste B</li>
</ul>
</li>
<li>
Genre
<ul class="dropdown-menu">
<li>Splatter</li>
<li>Horror</li>
<li>Action</li>
<li>Science-Fiction</li>
<li>Fantasy</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Sonstiges
<ul class="dropdown-menu multi-level">
<li>Einstellungen</li>
<li>Protokoll</li>
<li>HOME</li>
</ul>
</li>
<li><i class="fa fa-hand-o-up"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Please refer: APEC Energy
In the right corner, there is a user icon. On clicking it, we can see an accordion in the dropdown menu. How can this be achieved?
I have put together a JSFiddle with the basic code. I removed all my trials of the accordion because whatever I tried only breaks the code.
My code for the navbar:
<!-- Navigation -->
<div id="gxcpl" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand hidden-lg hidden-md" href="#">Living Ahimsa</a>
<a class="hidden-sm hidden-xs" href="#">
<img class="gxcpl-logo" src="assets/images/logo.png" />
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Homes
<ul class="dropdown-menu" role="menu">
<li>Introduction</li>
<li>Innovation</li>
<li>Services</li>
<li>Development</li>
<li>Future</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Energy
<ul class="dropdown-menu" role="menu">
<li>BIO Heating</li>
<li>BIO Lighting</li>
<li>BIO Air</li>
<li>BIO Frequency</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Water
<ul class="dropdown-menu" role="menu">
<li>Whole House Filter</li>
<li>Reverse Osmosis</li>
<li>Portable Filters</li>
<li>Portable Storage</li>
<li>Rain Water Storage</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Garden
<ul class="dropdown-menu" role="menu">
<li>Bio Grow System</li>
<li>Bio Watering System</li>
<li>Indoor Growing</li>
<li>Organic Seeds</li>
<li>Organic Plants</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Health
<ul class="dropdown-menu" role="menu">
<li>Core Health</li>
<li>Oils</li>
<li>Raw Foods</li>
<li>Natural Supplements</li>
<li>Protien</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-angle-down"></i> <i class="fa fa-user-o"></i>
<ul class="dropdown-menu" role="menu">
<li>Shopping Basket</li>
<li>Contact Us</li>
<li>Call Request</li>
<li>Account Settings</li>
<li>Login/Register</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Navigation -->
Your JSFiddle seems to have accordion menu. I don't understand, what behaviour is missing?
I'm using Materialize for my design. The dropdown and the sidenav doesn't work. The console doesn't give any errors and I did initialize the scripts after jQuery just like the materializecss.js.
Here's the code:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Initialize Materialize Scripts -->
<script>$(".button-collapse").sideNav();</script>
<script>$(document).ready(function(){
$('.parallax').parallax();
});</script>
<script>
$(".dropdown-button").dropdown({
hover: false
});
</script>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li><a class="fakelink">Lite</a></li>
<li><a class="fakelink">Standard</a></li>
<li><a class="fakelink">Essential</a></li>
<li class="divider"></li>
<li><a class="fakelink">Enterprise</a></li>
</ul>
<nav role="navigation" class="red">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
<ul class="right hide-on-med-and-down">
<li><a class="fakelink">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink">Other Services</a></li>
<li><a class="fakelink">About</a></li>
</ul>
<ul id="nav-mobile" class="side-nav" style="left:-250px;">
<li><a class="fakelink truncate">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink truncate">Other Services</a></li>
<li><a class="fakelink truncate">About</a></li>
</ul>
<a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
</div>
</nav>
You need to make sure the document has loaded before setting the side nav and dropdown. Just move that code inside your document.ready function
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Initialize Materialize Scripts -->
<script>$(document).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$(".dropdown-button").dropdown({
hover: false
});
});</script>
<body>
<ul id="dropdown1" class="dropdown-content">
<li><a class="fakelink">Lite</a></li>
<li><a class="fakelink">Standard</a></li>
<li><a class="fakelink">Essential</a></li>
<li class="divider"></li>
<li><a class="fakelink">Enterprise</a></li>
</ul>
<nav role="navigation" class="red">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
<ul class="right hide-on-med-and-down">
<li><a class="fakelink">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink">Other Services</a></li>
<li><a class="fakelink">About</a></li>
</ul>
<ul id="nav-mobile" class="side-nav" style="left:-250px;">
<li><a class="fakelink truncate">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink truncate">Other Services</a></li>
<li><a class="fakelink truncate">About</a></li>
</ul>
<a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
</div>
</nav>
Have you tried putting script at the END OF BODY ELEMENT? It works for me.
<script>$(document).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$(".dropdown-button").dropdown({
hover: false
});
});
</script>
This code worked for me!! You can find the entire explanation in here: http://materializecss.com/side-nav.html
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<ul id='dropdown1' class='dropdown-content'>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</ul>
<i class="mdi-navigation-menu"></i>
firstly apologies opening a question on which should be seen as a fairly simple issue....and it should be, but I cant get it working to save my life.
Maybe someone can just give this code a quick scan and tell me what I am doing wrong, as I am not to familiar with bootstap (which im using here) and HTML5
My Problem
Navbar working perfectly on home page but when copy and pasting navbar to other pages the services and menu links simply do not expand / collapse
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Finger Food Catering</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hot Platters</li>
<li>Cold Platters</li>
<li>Gourmet Platters</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Wedding Catering</li>
<li>Birthday Catering</li>
<li>Corporate Catering</li>
<li>Event Catering</li>
<li>Funeral Cateringg</li>
</ul>
</li>
<li>About</li>
<li>Testimonials</li>
<li>Inquire</li>
<li>Blog</li>
<li class="active">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span style="font-size:2.0em"><span style="color:#8AB8E6">Contact Us:</span> <body onload="_googWcmGet('number', '1300 785 701')">
<span class="number">1300 785 701</span>
</body> </a></li>
</ul>
</div>
</div>
</nav>
Are you using Materialize?
If you are, scroll down to the bottom of index.php where the scripts are and change <script src="../../bin/materialize.js"></script> to <script src="js/materialize.js"></script>
My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.