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!
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>
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.
This question already has answers here:
Bootstrap 4: Multilevel Dropdown Inside Navigation
(7 answers)
Twitter Bootstrap Multilevel Dropdown Menu
(6 answers)
Closed 2 years ago.
I have to wonder why bootstrap does not provide a multilevel dropdown in the top navbar.
https://www.youtube.com/watch?v=jEAeDID1pks
From this video, I could see the exact requirement for me, but implementation somehow fails. It is like some time I could get the working output and sometimes it's not.
I am not very aware of jQuery, but I think this is only possible through jQuery because I searched for a lot of options.
This above picture is the basic top navbar provided by bootstrap. I want another submenu in that dropdown which leads to another submenu.
I need something like above.
https://getbootstrap.com/docs/4.0/components/navbar/
from the above link, I referred to the navbar documentation from bootstrap.
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
This is the code for the basic navbar. I am using angular 7 in my case. I wonder if there any other frameworks which support this requirement in angular 7.
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
// Change positioning of mobile menu icon based on screen size.
$(document).ready(function(){
if($(window).width()<768)
{
$('button#mobile-nav').css('float','left');
}
$(window).on('resize',function(){
if($(window).width()<768)
{
console.log('here');
$('button#mobile-nav').css('float','left');
}
});
});
<header class="nav">
<nav class="navbar navbar-default navbar-fixed-top navbar-color" role="navigation">
<div class="container-fluid">
<div class="navbar-header mobile-nav-header">
<button id="mobile-nav" type="button" class="navbar-toggle" role="button" aria-label="Toggle Navigation" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-right" id="facebook-mobile">
<a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div> <!-- navbar-header mobile-nav-header -->
<div class="collapse navbar-collapse text-uppercase" id="navbar">
<ul class="nav navbar-nav">
<li><a title="Welcome" class="glyphicon glyphicon-home" href="index.php"><span class="hidden">Home</span></a></li>
<li><a title="About" target="_self" href="#about">About</a></li>
<li><a title="Service" target="_self" href="#services">Services</a></li>
<li><a title="Address" target="_self" href="#location">Location</a></li>
<li><a title="Gallery" target="_self" href="gallery.php">Gallery</a></li>
<li><a title="Contact" target="_self" href="contact.php">Contact</a></li>
</ul>
<div class="navbar-right" id="facebook-desktop">
<a title="Visit on Facebook" target="_blank" href="https://www.facebook.com/?hc_ref=SEARCH">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div> <!-- #navbar -->
</div> <!-- container-fluid -->
</nav>
</header>
I have a mobile menu created with Bootstrap 3 that automatically aligns to the right side of screen. I wrote some JavaScript code to make mobile menu icon appear on the left side of screen because I have a Facebook button on the right side of screen. Everything works with my code; however, there is one area I'm trying to improve. On my gallery page I have 500+ images. The problem is my mobile menu stays on right side and pushes the Facebook button slightly over to the left until the page fully loads. After the page fully loads everything appears correctly. How can I correct this so the mobile menu always appears on the left side immediately? Thanks!
I have attached a couple images to reference what I'm trying to explain. Tried uploading a video, but videos are not allow on this site.
On the gallery page only, when the page first loads, it initially looks like the attached image named "before-page-loads.png". Once the page is loaded it displays correctly and looks like the image in "after-page-loads.png".
before-page-loads.png
after-page-loads.png
I have also provided my JavaScript and HTML code.
Thanks for your help!