I like to change the default ID name from id="navbar" to id="main-navbar"
From: <div id="navbar" class="navbar-collapse collapse">
To: <div id="main-navbar" class="navbar-collapse collapse">
If I change then the main nav/menu items doesn't expand/collapse when you check in small device. How can I manually enable this feature? Please help.
Here is bootstrap template that I am using: https://getbootstrap.com/examples/navbar/
There is this button in code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
So you change data-target="#navbar" to data-target="#main-navbar"
Related
This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 4 years ago.
How can i make navbar static in all web page ?? i don't wont to rewrite it in every page ! can anyone give me the idea to do that in javascript !?
<nav class="navbar navbar-inverse">
<div class="container">
<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="index.html">eLibrary</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li><a href="add-librarian.html" >Add Librarian</a></li>
<li>View Librarian</li>
<li>Logout</li>
</ul>
</div>
</div>
Based on your question, the best solution would be to implement some PHP.
Below is a server-side solution and PHP will in the background construct your HTML including the navigation.html. The browser code will not differ from a standard HTML code.
Follow these steps:
Step-1: Add your HTML navigation bar in a separate file, e.g.(navigation.html).
Step-2: Create a standard HTML file and rename the file to have .php suffix, let us call this file index.php.
Step-3: Open your index.php and add following line in the body area.
<?php include 'navigation.html' ?>
You have now your navigation bar text in one single place and spread out on your pages with above mentioned PHP. What the solution does is that by using PHP it allows you to import/inject HTML code into index.php.
Note! For this solution to work your need have PHP running and supported on your webserver. In case your attempt to run the solution on your local machine you need a solution for webserver with php, eg. XAMPP.
Just add navbar-fixed-top in <div class="navbar-header">.
It should look like this: <div class="navbar-header, navbar-fixed-top">
I don't think you can write that in javascript, because JS is for dynamic websites and not for static websites...
Edit: You need bootstrap installed or imported for this, but I assume you already did that.
Extract the navbar to a seperate file, e.g. navbar.html.
<nav class="navbar navbar-inverse">
<div class="container">
<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="index.html">eLibrary</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li><a href="add-librarian.html" >Add Librarian</a></li>
<li>View Librarian</li>
<li>Logout</li>
</ul>
</div>
</div>
Then add a div to your index.html(or whatever name your file has) with an id.
<div id="nav"></div>
In you javascript execute this:
$('#nav').load('navbar.html');
For this you have to import JQuery:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
This is what I have:
<div class="container" style="padding-top: 70px;">
<div id="navbar">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="/">
<div class="col-xs-2"><img src="img/favicon.png" alt="Dev Icon" height="20px" width="20px"></div><div class="col-xs-10">FrontEnd Dev</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<?php include('includes/navbar.php'); ?>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
The <?php include('includes/navbar.php'); ?> just adds the <ul class="nav navbar-nav"> with the <li> tags from another array file.
This issue only happens when the toggle button is available on smaller devices. Clicking on the button does nothing visually (but it does change classes in the code). Clicking the button a few more times will result in the disappearing of the complete navbar. I removed any other css styling that could affect the navbar but is still the same. I use Bootstrap v3.3.7 using the CDN links from the Bootstrap website.
I found the problem. The toggle button has data-target="#navbar" which targets the <div id="navbar" class="navbar-collapse collapse">. I didn't realize that I had all the navbar wrapped up in a ´div´ with the id of navbar. So that's where the conflict was.
I want my bootstrap and angular app menu to collapse with animation after selection, and then let the handler do navigation. (I'm mystified why a menu wouldn't close by default on selection).
I've found how to do jquery stuff in an angular app, and how to do menu stuff in a jquery app, so I'm trying to combine the solutions to these two questions:
(menu, but not angular) Hide Twitter Bootstrap nav collapse on click
(anugular, but not menu) How to trigger ng-click [AngularJS] programmatically
My html looks like this...
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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="#/" ng-bind="title"></a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li ng-repeat="menuItem in menuItems" ng-click="selected(menuItem)"><p ng-bind="menuItem.name"></p></li>
</ul>
</div>
And so, I think my JS should look like this...
$scope.selected = function(menuItem) {
console.log(menuItem);
$timeout(function() {
angular.element('#js-navbar-collapse').triggerHandler('click');
}, 10);
};
But after trying every selector and several jquery methods, I can't make it work. The result is the same each time: the menu stays open, and all I get on the UI is a little flash of the menu icon.
I'am trying to have an alert at the top of my page with a form for my visitors to put in their phone number. It is simply a "alert alert-info" div with the form within it. So that works great because I put it at the top of my body tag. Then comes the nav, which right now is a "navbar navbar-default navbar-static-top" div. When I try to change that into a fixed-top (fixed below the alert) it just comes out on top of the alert (There might be a z-index issue, I don't know). Does anyone know how I can make the nav fixed at the top but below the alert (which should be static at the very top)?
Thanks alot in advance!
Thanks for your answers. Found the final answer my self (from another question here) using the bootstrap affix.
I put an id to the alert called "alert" and an id to the nav called "topnavbar". I then added the css:
#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
and the javascript:
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});
From: Putting content/banner above the "Fixed Top Navbar"
This put the nav between the alert and jumbotron and the nav becomes sticky after the alert.
Per Bootstrap's documentation: "The fixed navbar will overlay your other content, unless you add padding to the top of the body."
If I get what you want to do, why not try something like this.
Just add another div container in .. but at the top of the navbar.
And just place you alert in this container.
Here is the Fiddle.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container col-lg-12 bg-primary"><br><br></div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I have two problems with Bootstrap: I can't add ScrollSpy and smooth scroll at my Boostrap site.
<body data-spy="scroll" data-target="#test">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div id="test" class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-ex1-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="#">L</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="test" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="">Chi Sono</li>
<li><a class="scroll" href="#Conoscenze">Conoscenze</a></li>
<li><a href="#OS" >Sistemi operativo</a></li>
</div><!-- /.navbar-collapse -->
</nav>
This is the navbar code. I've tried many solutions, but to no avail. How do I add this effect?
replace
<div id=test ...>
with
<nav id=test...>
add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component. Since you are using div when defining id of data-target for scrollspy, it won't work. use nav instead
http://getbootstrap.com/javascript/#scrollspy
And another error in this part of your code here
</div><!-- /.navbar-collapse -->
</nav>
do the navbar-collapse with nav tag not the div tag.
so the correct code is
</nav><!-- /.navbar-collapse -->
</nav>