The links within my site's header/navigation aren't working for some reason. I think it has something to do with the CSS I am using but I have followed the code exactly like it is on Bootstrap's documentation site. Can someone help me fix this error?
You can view the full site here: http://kaybesee.com/mb
Here is my HTML:
<div id="nav-wrapper">
<nav class="navbar" role="navigation" data-spy="affix" data-offset-top="1000" data-offset-bottom="200">
<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="#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>
<a class="navbar-brand" href="#"><img src="img/logoTextRight.png" class="img-responsive"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-button">Portfolio</li>
<li class="nav-button">About Us</li>
<li class="nav-button">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div><!-- #nav-wrapper -->
Believe this is related, you have a e.preventDefault on your li click line 36 on your index. I don't really see a reason for that, but since your anchor is inside, the anchor click event never fires.
Remove e.preventDefault();
$('ul.nav > li').click(function (e) {
e.preventDefault();
You Should Match the Page ID with the Tab ID in the CSS . I think there is some bug with bootstrap nav class.
See this article for more information. http://webdesign.about.com/od/layout/a/aa042307.htm .
Related
I have a bootstrap navbar but it is not opening the menu list when clicked. The issue started occuring when I tried to change the breakpoint as my menu list was overflowing. Please have a look at the code. I feel the issue is occuring with the css part
http://jsbin.com/wadazijute/edit?html,css,output
Please check the image below.
Toggle appears after the screen width is 768px but I want the toggle to appear before that to avoid the navigation menu to appear like this:
http://imgur.com/QZzAMKz "navbar issue"
The code for a working collapse is:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#myCarousel">Pinak Das</a>
<button type="button" 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>
<!-- 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>Home</li>
<li>Education</li>
<li>Technical Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
No extra CSS required.
Working example at JSFiddle
There are quite a few posts here about changing the Bootstrap CSS to make the header non-responsive.
But I have two headers, only one of which I want to be non-responsive, so I don't want to change it as a class:
One header has a login form, it works fine and collapses responsively exactly how I want it to.
The other is for a logged-in user and only has one link to log out, and I want to make this non-responsive. Here's how it looks now as the browser width changes, which is obviously not ideal:
And here's the code for the header I'd like to make non-responsive:
<nav class="navbar navbar-inverse navbar-fixed-top identHeader8">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="dashboard.html">[logotype]</a>
</div>
<div id="logout_navbar">
<ul class="nav navbar-nav pull-right collapse in">
<li>
Log out
</li>
</ul>
</div>
</div>
</nav>
Thanks in advance for any help you can provide.
You can use Non-nav Links (See Docs) and place it inside the header after the navbar-brand in this example.
<p class="navbar-text">Log In</p>
You can adjust to where is needed with your own CSS rules.
See example Snippet.
body {
padding-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">[logotype]</a>
<p class="navbar-text">Log In
</p>
</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 navbar-right">
<li>Log out
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<img src="http://placehold.it/2050x850/ff0/fff" class="img-responsive">
I think the best would be I provide the website link which is : www.youthlife.de
I am trying to position the little brand logo closer to the navbar without changing the position of the navbar itself.
If I put a margin-left to the brand, the navbar moves as well. I don't get why. What regulates the distance between the brand and the navigation bar?
I don't know what size of height and width of your logo.
Here's what I have tried.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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> <a class="navbar-brand" href="#"><img src=""/>
Start Bootstrap</a>
</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> About
</li>
<li> Services
</li>
<li> Contact
</li>
</ul>
</div>
</div>
</nav>
This is the CSS:
.navbar-brand img {
width:90px;
height:25px;
display:inline-block;
margin-top:-3px;
}
You can check the demo HERE.
Now, let me know further if it is not what you wish.
Hint: Pls provide some codes to see what's been wrong with it.
I am trying to implement the responsive bootstrap navigation bar but having trouble handling the collapsed state.
Once I resize the window I get to the state where this button appears:
When I click this button nothing happens.
Below I attached my code for my current navigation bar. Could it be the naming of the divs that is wrong? When I read the documentation it says that the collapse plugin is required - shouldn't this plugin be included in the standard bootstrap for angular?
I also tried this solution: https://stackoverflow.com/a/17672546 - but it is as if when the state is changed in the collapse="isCollapsed" no effect is achieved.
<nav class="navbar navbar-default" role="navigation" >
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
<a class="navbar-brand" href="#">My Application</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/logbook')}">Log Books</li>
<li ng-class="{ active: isActive('/logentry')}">Logs</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/logentry/create')}">Create Log</li>
<li ng-class="{ active: isActive('/status')}">Show Status</li>
<li ng-class="{ active: isActive('/statistics')}">Statistics</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
If you are not using twitter bootstrap's javascript then you can use angular-ui bootstrap's collapse directive to collapse your navbar. Just make sure to put an ng-click directive on the .navbar-toggle button to negate the current value of the collapse variable. Add another ng-click to the .navbar-collapse element to collapse the navbar when a link has been clicked.
Here's a DEMO
<body ng-click="collapse = false">
<div class="navbar navbar-default" ng-click="$event.stopPropagation()">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
ng-click="collapse = !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">
Title
</a>
</div>
<div class="collapse navbar-collapse"
ng-controller="HeaderController"
collapse="!$parent.collapse" ng-click="$parent.collapse = false">
<ul class="nav navbar-nav navbar-right">
<li>link</li>
</ul>
</div>
</div>
</div>
</body>
UPDATE:
1 I noticed that you have an ng-controller within the .navbar-collapse item, since an ng-controller creates a child scope, you have to use collapse="!$parent.collapse" and ng-click="$parent.collapse = false" within that element itself. The plunker has been updated above, check it out.
2 As a side note, you can take it a step further and add an ng-click="collapse = false" within your html body to collapse the navbar when the user clicks outside of the navbar, just make sure to add ng-click="$event.stopPropagation()" to the .navbar element to avoid collapsing it while the user is clicking the .navbar-toggle.
Your code seems to be fine please see here http://jsbin.com/xinujuvi/1/edit
make sure that you've got reference to bootstrap.min.js script
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Make sure to referrence this :
ui-bootstrap-tpls-0.11.0.min.js
You can download it from their site
And this is the code :
<nav class="navbar navbar-default" role="navigation" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-danger" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar btn-info"></span>
<span class="icon-bar btn-info"></span>
<span class="icon-bar btn-info"></span>
</button>
<a class="navbar-brand">YouSite</a>
</div>
<div class="navbar-collapse collapse" collapse="!isCollapsed" id="navbar-collapse-1" ng-controller="HeaderController">
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/logbook')}">Log Books</li>
<li ng-class="{ active: isActive('/logentry')}">Logs</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/logentry/create')}">Create Log</li>
<li ng-class="{ active: isActive('/status')}">Show Status</li>
<li ng-class="{ active: isActive('/statistics')}">Statistics</li>
</ul>
</div><!-- /.navbar-collapse -->
Im in the middle of migrating my project form Bootstrap 2.3.2 to Bootstrap 3.
I am unable to center the navbar links as I was able to before. I used this method previously: Center bootstrap's brand and list items but is not working for my new navbar.
The below link is a jsfiddle direclty using one of bootstraps examples (with the sticky footer and navbar)
Can someone please help me center these links?
http://jsfiddle.net/brainbolt/52VtD/4/
HTML
<div class="navbar navbar-default navbar-fixed-top center">
<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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services & Promos
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
CSS
.navbar-default > .container { text-align: center }
Thanks!
Refer this site, Paste your bootstrap 2.3.2 code in here, and click button showing 2.x>3.
This will migrate your code automatically to 3.0.
OR
Refer this, to get bootstrap documentation for migration.
Hope this helps.