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>
Related
I know there are some other posts on this subject and I checked many of the proposed solutions but I failed to understand exactly how I should modify the code. I have tried many times and failed both on HTML and JS.
<div class="mainmenu-area">
<div class="container">
<div class="row">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Products</li>
<li>Categories</li>
<li>Contact us</li>
</ul>
</div>
</div>
</div>
</div>
The funny thing is that the toggle button seems to work on local but when hosted online it doens't.
Can you please let me know how to fix it?
Michele
Your problem is that you cant go to http from https. You need to change your bootsrap.js link to https
from
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
to
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></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 am altering a Bootstrap-based template. The original site was a single-page with the top nav links simply scrolling to the correct section of the page. I've added some a couple of other pages, and I want the navbar links to return the users to the appropriate section of the home page.
However, when I've edited the links on the other page (not the main page) refer back to the home page, the links aren't working.
I'm sure there is something in the js files that is breaking the default mode and keeping it on the home page.
The problem is that I don't know what to edit to stop this.
The homepage is http://jimbrink.org. The scrolling links work there.
The page where the links don't work is: http://jimbrink.org/articles
Here's the html for the bar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<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="#intro">JimBrink.org</a>
</div>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Intro
</li>
<li>About
</li>
<li>Resources
</li>
<li>Impact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- /#navbar -->
<!-- *** NAVBAR END *** -->
Sorry for the newbie question.
UPDATE
Fixed it. The #navigation tag was just for the js function that interrupted the default action when clicked. I just removed that ID and it worked.
When you are clicking in "About" in menu, it has as href value "http://jimbrink.org/#about" and based in JS it has to move in section with id "about". In your HTML page you don't have any section with ID "#about". You need to add to about section id about. You need to match the sections IDs with the values of menu items href value, because when you are clicking it shows a JS error and cannot scroll to the section.
Uncaught TypeError: Cannot read property 'slice' of undefined
The issue I am having is getting both Scrollspy and a mobile menu to collapse when a link is clicked together. I can get the functionality of either one working by itself, but not together.
This snippet has scrollspy working, however, the mobile menu does not collapse when a linked is clicked.
<body data-spy="scroll" data-target="#mainNavbar">
<nav id="mainNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#">Site Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Social</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
</body>
If I add the following to each anchor tag the mobile menu will collapse on click, but scrollspy breaks:
data-toggle="collapse" data-target=".navbar-collapse.in"
I'm assuming that using data-target is causing the issue, but I'm not sure how else to get around it.
Does anybody know of a way to get these two things to work together?
In searching other answers I was able to get both features to work by themselves, but I've yet been able to find something to assist in getting them working together. If I missed an answer, please point me in the right direction.
Thanks,
After further searching, it seems like using the data-toggle and data-target in the anchor tags breaks scrollspy. I've decided to use the following JS I found on another StackOverflow question for collapsing the mobile nav menu. This doesn't work with sub-menus it seems, but I'm not worried about that.
<script>
$('.navbar-collapse a').click(function (e) {
$('.navbar-collapse').collapse('toggle');
});
</script>
I'm trying to recreate collapsible Bootstrap responsive navbar with AngularStrap.
Here is plunker:
<div class="navbar navbar-inverse">
<div class="container" bs-collapse start-collapsed="true">
<div class="navbar-header">
<button class="navbar-toggle" type="button" bs-collapse-toggle>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div bs-collapse-target>
<ul class="nav navbar-nav">
<li>
Link
</li>
<li>
Link
</li>
</ul>
</div>
</div>
</div>
bs-collapse directive fits Bootstrap navbar quite easily, but it doesn't support collapsing animation out of the box.
How it can be done?
Is there a way to do this following Bootstrap workflow and utilizing its .collapsing animation instead of re-inventing the wheel (but simple LESS/SASS mixin that makes use of it is also fine)?
To get the animations working, you may need to include angular-motion AND the angular-motion.min.css file that's part of the angular-motion package. The reference to the CSS file isn't part of the main documentation. I'm pretty sure I found references to it here on StackOverflow when I had similar issues.