when i click on main category like Kundan it's not working, thats is my code:
<div class="collapse navbar-collapse" id="mainNav">
<ul class="nav navbar-nav">
<li class="dropdown">Kundan
<ul class="dropdown-menu" role="menu">
<li>Bangles</li>
</ul>
</li>
</ul>
</div>
try data-toggle="href" instead of data-toggle="dropdown".
Related
The menu is working fine on desktop using hover property. But the same is not closing using on-click on mobile and tabs.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<nav class=" navbar navbar-expand-lg navbar-light bg-primary">
<div class="container">
<div class="col-md-2 sec-menu-button mobile-vw navbar-brand">
Browse Journals
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="nav navbar-nav">
<li class="dropdown active">
<span class="nav-label">RESOURCES</span>
<ul class="dropdown-menu">
<li>GUIDE FOR EDITIORS</li>
<li>GUIDE FOR REVIEWERS</li>
<li>GUIDE FOR EDITION IN CHIEF</li>
</ul>
</li>
<li class="dropdown">
<span class="nav-label">AUTHORS GUIDE</span>
<ul class="dropdown-menu">
<li>EDITIORIALS WORK FLOW</li>
<li class="dropdown-submenu">
<span class="nav-label">EDITORIAL AND PUBLISHING POLICIES</span>
<ul class="dropdown-menu">
<li>SUBMISSION POLICIES</li>
<li>TRANSFERS</li>
<li>LICENSE AGREEMENT AND AUTHORS COPYRIGHT</li>
<li>USE OF EXPERIMENTAL ANIMAL & HUMAN SUBJECTS</li>
<li>COMPETING INTERESTS</li>
<li>DIGITAL IMAGES INTEGRITY AND STANDARDS</li>
<li>BIOSECURITY CONCERNS</li>
<li>DUPLICATE PUBLICATIONS</li>
<li>CONFIDENTIALITY , PRE-PUBLICTY AND PREPRINTS</li>
<li>PLAGIARISM AND FABRICATION</li>
</ul>
</li>
<li>PUBLICATION FEES</li>
<li>ARTICLE PREPARATIONS INSTRUCTIONS</li>
<li>PEER REVIEW</li>
<li>ARTICLE TYPES</li>
</ul>
</li>
<li>OPEN ACCESS</li>
<li>PUBLICATIONS ETHICS</li>
<li>FAQS</li>
</ul>
<div class="col-md-2 sec-menu-button desktop-vw">
Browse Journals
</div>
</div>
</div>
</nav>
I am aware that these kind of questions has already been answered. But, I tried using them and got no luck. Please look into the issue and help me out.
The html code is
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
The jquery code is
$('#accountNavX' ).hide();
This has not worked.My end goal is to only hide all the account nav list items.
Edit:
Was lazy accountNavX was referring to me repeating it three times with the respective number.
jQuery hides by writing display:none directly on the element. Usually it takes precedence over all. Bootstrap attaches !important to it's display: block code, thus preventing jquery from overriding it.
You would have to do the following:
$('.accountNavX').removeClass('visible-xs-block').hide();
In below code snippet, I have added a class acc-nav. I am using that to hide elements.
Or you can use a different selector like li[id^=accountNav].
function hideNavItems() {
// $('.acc-nav').hide()
$("li[id^=accountNav]").hide()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="acc-nav visible-xs-block">Account</li>
<li id="accountNav2" class="acc-nav visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="acc-nav visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
<button onclick="hideNavItems()">Hide Account Nav items</button>
</div>
Try this:
$('[id^=accountNav]').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
#f.khantsis answer is correct.
Here's my solution in CSS way. You can use media query to hide certain elements in smaller break points,
#media (max-width: 767px){
#accountNav1, #accountNav2, #accountNav3{
display: none !imporant;
}
}
This way you don't need to worry for larger screen which button will appear automatically.
Just add a new class to all the accountNav-id- items. For example add a class called accountNav to all of those. Then just call $(".accountNav").hide();
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="faqNav">FAQ</li>
<li id="loginNav">Log In</li>
<li id="accountNav1" class="visible-xs-block">Account</li>
<li id="accountNav2" class="visible-xs-block nested">My Profile</li>
<li id="accountNav3" class="visible-xs-block nested" id="logoutNav" onclick="logout()">Log Out</li>
</ul>
</div>
and js code:
function logout(){
$('.nav').children().hide();
}
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>
I have build a stacked navigation with several sub-menus.
<ul class="nav nav-pills nav-stacked">
<li data-toggle="collapse" data-target="#subnav">
Nav
<ul class="nav nav-pills collapse" id="subnav">
<li>Subnav1</li>
<li>Subnav2</li>
<li>Subnav3</li>
</ul>
</li>
</ul>
When click on the parent, the sub-menus will open nicely. However, when I click on any of the sub-items, the parent menu will close again. How can I prevent this?
Edit: Try out on jsFiddle
One way is to extract the trigger element out of the collapsible...
Bootply
HTML :
<ul class="nav nav-pills nav-stacked">
<li>
<span data-toggle="collapse" data-target="#subnav">Nav</span>
<ul class="nav nav-pills collapse" id="subnav">
<li>Subnav1</li>
<li>Subnav2</li>
<li>Subnav3</li>
</ul>
</li>
</ul>
You could do something like this :
$("#subnav").on( "click.bs.collapse.data-api", function(e) {
e.stopPropagation();
});
I'm using backbone and Jquery and I have a backbone menu with a bunch of click able links.
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li class="dropdown">
<a data-toggle="dropdown" id="n-btn" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li> dropdown1</li>
<li> dropdown2</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
I'd like to be able to do the following make a generic function such that I can click any of the links in the menu bar div above and have one generic function to handle all of the clicks.
Currently I have to create a separate function using jQuery for each id/herf
$(window).load(function(){
$("#dropdown1").on('click.dropdown.data-api', function(e) {
e.preventDefault();
alert("test");
});
});