Since my application had same navigation bar across application, I thought of implementing shared navigation bar across application.
My project structure is a follows
Login
|-Login.html, Login.css, Login.js
Home
|-Home.html, Home.css, Home.js
Test
|-Project.html, Project.css, Project.js
Test1
|-Test1.html, Test1.css, Test1.js
Test2
|-Test2.html, Test2.css, Test2.js
|-Temp
|-Temp.html, Temp.css, Temp.js
|-Shared
|-Shared.html, Shared.css, Shared.js, navigation.html
Here is my navigation.html which I have kept inside shared folder.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link"
href="../Home/Home.html"
>Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../Employee/CreateEmployee.html"
>Employee</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
>Test</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown">
<a
class="dropdown-item"
href="../Test/Test1/NewCQ.html"
>Create New CQ</a>
<a
class="dropdown-item"
href="../Test/Test2/Test2.html"
>Update CQ</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="../Temp/Temp.html"
>Temp</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link float-right" href="../Login/Login.html"
>Logout</a>
</li>
</ul>
</div>
</nav>
This is how I have created div in respective html files
<div class="row border-bottom border-dark">
<div class="col px-0">
<!--Navigation bar-->
<div id="navigationBar">
</div>
</div>
</div>
When respective page visits I am loading that navigation.html file in shared.js from shared folder which I have imported in all the pages.
//Load navigation.html from shared folder
$(function(){
$("#navigationBar").load("../Shared/navigation.html");
});
The issue here is that
relative paths will be different from different pages, so how do i need to provide the relative paths inside navigation.html
$("#navigationBar").load("../Shared/navigation.html"); is not loading inside Test.html(its beacuse of relative path) when redirect from home.html
please let me know if am doing anything wrong here. waiting for your responses. Thanks in advance.
So, why use relative paths at all? Just use an absolute path in your links.
<a class="dropdown-item" href="/folder/Test/Test2/Test2.html">Update CQ</a>
You'll need to have some more javascript detecting the current path and figuring out the relative path from there, but that's a lot of work to do for no real gain unless you have a very specific reason to use relative paths.
Related
First time here. I am having trouble with my Bootstrap 5.1 Navbar menu. Some background: I am hosting my website locally via Xampp and my pages are php to allow for forms and cookies. Everything works great on the desktop. I have tested the responsiveness of my site in DevTools on different sized devices and the dropdown menu (the collapsed navigation menu) works perfectly on those. I then tried the dropdown menu on my S21 Ultra and Tab S6 using the locally hosted server. While the hamburger toggler will appear, it will not drop down the menu. I tried removing the button icon so that I could see if the button is toggling and it is, but it doesn't seem to be actually changing any of the values of the navbar as it does on the desktop or in the DevTools. I have tried everything. My code is up-to-date and the js and css for Bootstrap are placed in the correct locations. Please help.
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>
Again, it works fine on desktop and in mobile view using DevTools on Chrome. Any changes (CSS-wise) are only to color and size so they should not interfere. All other buttons on the webpage work. I am really unsure how to move forward.
All I need is for the drop-down menu to open when using a mobile device.
Remove the -bs- from data-bs-target and data-bs-toggle like below.
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>
I'm looking to expand and collapse the desktop version of the Bootstrap 4 navigation with a simple toggle button.
So example would be a menu button to click and will minimise menu items into the left side of the screen.
[Menu]
[Menu] Link Link Link Link Link
Bootstrap defaults however don't provide desired result.
<nav class="navbar navbar-expand-md navbar-light bg-light main-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100">
<ul class="nav navbar-nav w-100">
<li class="nav-item active nav-breaker">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Haircare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item nav-breaker">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Appointment</a>
</li>
</ul>
</div>
<a class="navbar-brand order-first order-md-0 mx-0" href="#">Shear Success</a>
<div class="collapse navbar-collapse w-100">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
The short answer is that changing bootstrap's default navbar animations is not easy.However, I got you most of the way there: https://www.codeply.com/go/1VhJAMNHEO
your markup is not boostrap-compliant. fix your html so that you follow boostrap standards outlined here. See the section labeled "With a toggler on the left... "
remove the navbar-expand-md class from the nav to make the menu collapsed by default
override bootstrap's default styling to achieve the desired "slide in from the left" effect. this is much easier said than done. in particular the navbar adds a temporary class .collapsing that is easy to miss.
this is going to mess up responsive styling and will require more attention i.e. media queries.
honestly, if you want the navbar to do anything besides what's listed out on the documentation, I've found it easier to write most of my own styling and scripting from scratch, leveraging only the basic .navbar and .navbar-nav etc classes for styling
I am not familiar with Bootstrap, and I am trying to customize a one-page web template.
Having the sample on http://lidia.gq .
My problem is that the menu items that it has, are not workable in Chrome. So, when I click any menu item, it does nothing, when it should navigate to the corresponding section from the page. I am using Version 68.0.3440.106.
But on other browsers like Firefox, Microsoft Edge, Internet Explorer, and on mobile Chrome I do not encounter this problem, all menu items successfully work.
So, why does it not work on Chrome Windows PC?
HTML
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#home"><img src="img/logo.png" alt="" /></a>
<!--Links-->
<ul class="nav navbar-nav pull-right hidden-md-down text-uppercase">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#newsletter">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#!"><i class="fa fa-search fa-lg"></i></a>
</li>
</ul>
</div>
It Uses Bootstrap v4.0.0-alpha.2
http://lidia.gq/css/bootstrap.min.css
Maybe someone encountered the same problem? Is there a way to fix it?
I did a little bit of bootstrap learning and debugging, and I figured out what was my problem, and I very happy about it. Finally I made my menu workable.
The problem is related to this top tag
<div class="navbar-desktop">
I mentioned, that I also have in my body tag:
<body data-spy="scroll" data-target=".navbar-desktop">
and my html is using the main.js
<script type="text/javascript" src="js/main.js"></script>
which calls the jquery
// localScroll js
jQuery(".navbar-desktop").localScroll();
If I comment that last line (or rename), from main.js, my menu works. Basically, seems that this code from java script confuses my code, and instead off calling .navbar-desktop from bootstrap nav, it uses the one from java script.
Not sure though what this code from body tag tries to do.
Cheers
There's no error with your code. But I guess you have errors in calling the required source files for bootstrap.
Files needed inside <head> tag:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Files needed before </body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Your HTML code should look like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#home"><img src="img/logo.png" alt="" /></a>
<!--Links-->
<ul class="nav navbar-nav pull-right hidden-md-down text-uppercase">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#newsletter">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#!"><i class="fa fa-search fa-lg"></i></a>
</li>
</ul>
</div>
I hope this helps.
I'm having trouble with bootstraps tabs and tabpanels not working with the active class as intended. I know there are many questions about this, but in all the ones I have read, adding and removing the inactive class is not working at all. In my case, it works... but kind of. First I'll provide the HTML:
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
</div>
</div>
The JavaScript comes from just including all the bootstrap 4 stuff.
So here's the thing, it starts off with some issues, being that as you click between the 3 tabs it will usually show 2 of them, but after clicking around for about 10 seconds it seems to fix itself and work completely as intended, showing only the content for the currently selected tab. I also use the same exact code with different names in other locations on my site, and it works perfectly fine.
Does anyone have any intuition into what would be causing the content to show incorrectly only the first 10 or so times clicking through the tabs, but then it works perfectly well until the page is refreshed?
First of all you have to apply active class properly.You have given active class to a link but it should be into li.nav-item and also in your nav items you have given your active class to #b-tab and in below given active class to a-tab content. Look at updated HTML code
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item active">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
a-tab content
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
b-tab content
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
c-tab content
</div>
</div>
I think there was a bug in the initial Bootstrap 4 code, I was using Bootstrap 4.0.0 beta when I encountered this issue. I downloaded Bootstrap version 4.1.3 and now the active class gets removed from the tab-pane as expected.
I'm guessing this is an easy problem for most guys. I copied the standard template from the bootstrap website, but the dropdown menu in the navbar isn'topening when I click it. Can someone see why?
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a
class="navbar-brand"
routerLinkActive="active current"
routerLink="/">
Home
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a
class="nav-link"
routerLinkActive="active current"
routerLink="/shopping-cart">
Shopping Cart
<span
class="caret">
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">My orders</a>
<a class="dropdown-item" href="#">Manage Orders</a>
<a class="dropdown-item" href="#">Manage Products</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
This problem is most likely caused by the absence of necessary scripts tags. On Bootstrap's website it says under the JS section:
Many of our components require the use of JavaScript to function.
Furthermore, there is a starter template that you can use with the navbar component that you are trying to use.
This provides all necessary references to work with bootstrap correctly.
Let me know if this helps!
As GTown-Coder mentioned, you need to include the jquery scripts and sure bootstrap...
There are two ways. I prefer the following for simplicity
In the index.html at (header should work too, if not include the scripts into the body at last) you must add the 4 lines from Bootstrap (LINK [Its download page of bootstrap 4])
Then your Dropdown should work.
Other way is to install (via npm, LINK) bootstrap, jquery, tether, popperjs and add the script paths to .angular-cli.json -> this can be tricky if there are some missing dependcies.
Are there still problems, let us know!