In my project, I used Bootstrap Nav bar for navigation and also AngularJS as the framework. In desktop view, it's working fine. But in mobile view, the Nav bar is not working properly. It's not auto collapsing when we click on a link.
This is my Nav bar code:
<nav style="padding:0;margin:0;border:0;" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="isCollapsed = true" 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>
<a class="navbar-brand" href="#/" id="mainLogo">
<img style="max-width:200px;" src="img/logo.png">
</a>
</div>
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li class="submenu">
Home
</li>
<li class="submenu">
Our Collection
</li>
<li class="submenu">
About us
</li>
<li class="submenu">
Contact us
</li>
</ul>
</div>
</div>
</nav>
I tried many solutions and still no good.
You can check the real example here.
I tried some Angular code samples and also JS based solutions. Nothing works for me. Can you please provide me a working NavBar sample with Angular.
My Angular version is 1.3 and Bootstrap version is 3.x
Warning: it`s a very hacky solution but it should work pretty well.
As said in the comments it's hard to combine both logics.
Just use ng-click="isCollapsed = false" event on every navbar element:
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li class="submenu">
Home
</li>
<li class="submenu">
Our Collection
</li>
<li class="submenu">
About us
</li>
<li class="submenu">
Contact us
</li>
</ul>
</div>
If you have trouble with the combination of href and ng-click you can have a look here href overrides ng-click in Angular.js. Basically you can also move everything inside a function like collapseAndMove(href) and doing the routing and collapse stuff there.
Related
I have a template which uses the above version of Bootstrap, complete with matching css and js scripts. The navigation code looks like this:
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
<div class="container">
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
Brand
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
It works fine with an automatic adding of the 'active' class to whatever menu item is clicked.
I was thinking of customizing the active state of the .nav-item elements and tried to disable the native effect but, despite disabling all the js scripts and all the css scripts it still works ie the active class is still added to the clicked item. How can this be and what is the code that makes it happen?
My bootstrap dropdown isn't working. I have researched this question already and all the answers I have gotten so far haven't worked for me. I've tried adding the google ajax js, it didn't help. I moved the ajax above the bootstrap mini.js, and it still didn't work. Any help?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">DPC</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>Builds</li>
<li>Services</li>
<li>Ratings</li>
<li>Pricing</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Social<span class="caret"></span>
<ul class="dropdown-menu">
<li>Instagram</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The first thing you need to do is open the developer tools in your browser. In there you are going to find a console, this console will almost certainly be telling you that jQuery is not available. Typically this will be because you didn't include it in the correct order.
When bootstrap is correctly set up with its dependency on jQuery satisfied it will automatically bind events to dropdowns so no need for any extra code on your part.
So, I know this is a common question, but I've tried everything and can't get it to work. When I click on it nothing happens. Bootstrap and JQuery load.
JFiddle: http://jsfiddle.net/qqS4F/
Code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /.btn -->
<a class="brand" href="#">S&J Bakery</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li class="dropdown" id="#dd">
<a href="#dd" class="dropdown-toggle" data-toggle="dropdown" role="button">
Menu
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li href="#lunch">Lunch</li>
<li class="divider"></li>
<li href="#cake">Cake</li>
</ul>
</li>
<li>
Contact Us
</li>
<li>
Sponsers
</li>
</ul>
<!-- /.nav -->
</div>
<!-- ./nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar navbar-inverse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-wrapper -->
Tips48,
It looks like you are using a version of the bootstrap css file that doesn't account for dropdown menus. I've updated the fiddle with the correct items and it is working properly for me (see screenshot below):
In case you need the link to the css file, here it is. Also, you can grab the latest version from the main site at http://twitter.github.io/bootstrap/index.html One nice feature is the "Customize" section, where you can tweak what you want/don't want in your project. Hopefully this helps.
Good luck and have fun!
My bootstrap nav bar adds a span and italicizes the active tab instead of just adding the active class to the active tab. My code is as follows:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Wutup?!</a>
<div class="nav-collapse">
<wicket:link>
<ul class="nav">
<li>Nearby Events</li>
<li>My Events</li>
<li>Manage My Events</li>
<li>About</li>
</ul>
</wicket:link>
</div>
</div>
</div>
</div>
The behavior can be seen here: screenshot
When you use the wicket auto-link feauture (i.e. wicket:link) it generates span instead of adding class to your HTML. For example if "My evenets" was the active page, the could would look like this:
<ul class="nav">
<li>Nearby Events</li>
<li><span><em>My Events</em></span></li>
<li>Manage My Events</li>
<li>About</li>
</ul>
If you want to avoid that, you should not use the autolinking feauture, or just change the css to suits the wicket's html that is generated.
I want to create a floating footer menu using JavaScript and HTML & CSS with other-sub menus for elements in the footer menu. The sub-menus also should float on mouse hoover. Is there any way i can fulfill these needs. Please help and Thank you.
It sounds like you're fairly new to CSS (no offence if you're not!)
To make it easier, I'd suggest using the Twitter Bootstrap framework - it'll save you a lot of time if you're new to CSS and save you from many common pitfalls.
Bootstrap has a Navbar component, which you can be fixed to the bottom of the site. I've attached some sample code, but I'd strongly recommend visiting the Bootstrap website and learning your way around - it'll be well worth your effort.
HTML (make sure you include the bootstrap stylesheet and javascript)
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Submenu Example
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
Normal Item
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
Dropup Item
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>