I am just not sure what i am missing on this drop down hamburger iam pretty sure my data-target is right
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">T<span> - </span>C<!--<img src="#">--></div>
</div>
<div class="navbar-collapse collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You need an onclick event on your button. There's currently nothing telling it what to do when you click the button. To get you started, you'll need to modify you button tag to something like:
<button onclick="toggleMenu" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
Then, add some script:
function toggleMenu() {
let menu = document.getElementById('menu');
menu.classList.toggle('open-menu'); //toggle is an awesome built in function that does just what you want. It will add this class if it doesn't exists, and remove it if it does
}
After that, you'll have to add some CSS to style your menu for when it's opened.
Looks fine to me, just be sure that your view width is less than 768px, otherwise the hamburger will be hidden.
Related
When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website: menu after being clicked on (clicked on the actual button in the right corner).
Meanwhile, this is the relevant code from the navbar.php:
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">
<img src="assets/img/logo.svg" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
Also, not sure if it makes a difference although the PHP file is named navbar.inc.php. And also, I'm not sure if it has to do anything with the jquery.js file.
i know this question is been so much in this forum, but i am having a problem here despite googling for hours. I want when i selected /click submenu the parent li get class .actives using Javascript/Jquery. Thanks for your help :)
Here is my code:
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid container">
<div class="row m04m">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav">
<span class="bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
<span class="btn-text">Select Page</span>
</button>
</div>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
ABOUT
<ul class="dropdown-menu" role="menu">
<li>About Company</li>
<li>About Jump</li>
</ul>
</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
</nav> <!--Main Nav-->
and here is my css
.actives{background-color:#174069;}
Thanks for your help
this example code will help you modify it as your requirement
$('#menu').find('li').click(function(){
//removing the previous selected menu state
$('#menu').find('li.active').removeClass('active');
//is this element from the second level menu?
if($(this).closest('ul').hasClass('secondLevel')){
$(this).parents('li').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
#menu li.active{
background: #ccddff;
}
demo sample code:
http://jsfiddle.net/L94N6/4/
I have a basic Bootstrap 3 responsive nav like so:
<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span
class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<a class="navbar-brand" href="#"><strong>brand</strong></a></div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Homepage</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">page-1</a>
<ul class="dropdown-menu">
<li>page-1-1</li>
<li>page-1-2</li>
</ul>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</body>
When I click the dropdown menu button in collapsed mode, navbar is closing and I cannot see the dropdown menu.
When I open nav:
and clicked Page-1:
It should open a dropdown menu below Page 1 but when I click Page-1 it closes nav. How can I solve this problem?
I have a functioning bootstrap navbar through use of ui.bootstrap of Angular-UI. For the mobile navbar, I want the navbar to collapse when a link is clicked. The toggle button functions as expected, but I can't get the ng-click="isCollapsed = !isCollapsed" to work on the nav links.
<div class="navbar navbar-default navbar-fixed-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
App
</div>
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}" ng-click="isCollapsed = !isCollapsed">{{item.title}}</a>
</li>
</ul>
</div>
</div>
</div>
In my controller, the applicable code is:
$scope.isCollapsed = true;
I had the same issue. Not sure if this is the best solution but I just added this in the main controller:
$rootScope.$on('$stateChangeStart', function(event, toState){
$scope.navbarCollapse = true;
});
It doesn't exactly do what you ask, because it's not triggering the collapse on click event. But it does trigger the collapse on each state change which for this purpose is the same.
I'm trying to get the sticky bootstrap menu to work on desktops. When i scroll down to a certain div element i want the sticky menu to appear BUT when the user scrolls back up and past that div element i want the sticky menu to be hidden. Can't quite figure out whats going on.
<!--sticky desktop menu-->
<div id="nav">
<div class="navbar navbar-default navbar-fixed-top hidden-lg navbar-inverse navbar-static-top" role="navigation">
<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="/"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>PRICING</li>
<li>WATCH OUR VIDEO</li>
<li>REAL LIFE TESTIMONIALS</li>
<li>FAQ'S</li>
<li>ABOUT US</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Script below;
$('#nav').affix({
offset: {
top: $('.desktopSticky').height()
}
});
Site can be seen here: http://bit.ly/1i4VUxv
If you're ok doing it via scroll-position vs a defined div, this will work for you:
$(function() {
var div = $(".sticky");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
div.removeClass('hidden-lg').addClass("visible-lg");
} else {
div.removeClass("visible-lg").addClass('hidden-lg');
}
});
});
See the bootply: http://www.bootply.com/CGY86c9Baz
If you prefer it be activated by a specific div, I think scrollspy may be your solution, but I don't know how to make it work!