I am unable to get the dropdown menu working. Whenever I click on the Profile link to drop down and view Account and Logout options it logs me out of my angular app.
<nav class="navbar navbar-expand-lg bg-dark navbar-fixed-top">
<a class="navbar-brand text-white" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" routerLink="/dashboard">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" routerLink="/dashboard">Documents</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">
Profile
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" routerLink="/account">Account</a>
<a class="dropdown-item" routerLink="/account" (click)="authService.SignOut()">Log Out</a>
</ul>
</li>
</ul>
</div>
</nav>
UPDATE
I know may be missing the sequence of including the .js or .css hence pasting the content of my angular.json & style.css.
styles.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import "~bootstrap/dist/css/bootstrap.css";
#import "~font-awesome/css/font-awesome.css";
angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/font-awesome/css/font-awesome.css",
"src/custom.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
The code snipped above is in pure HTML and Bootstrap. I have run it as you have provided, and it runs as expected. The dropdown works in both desktop and mobile view. You may want to tweak the coloring of the mobile burger icon, as its invisible, but otherwise functional. I have included some screenshots for your reference.
My best guess is that the issue you're facing has to do with your Angular setup rather than Bootstrap and HTML.
Related
I am trying to get a dropdown to appear from a navbar; however, I am getting an error.
Uncaught TypeError: Cannot read properties of null (reading 'classList')
I can confirm I have both Bootstrap and Popper installed through npmjs.
import { createPopper } from '#popperjs/core';
import bootstrap from 'bootstrap';
Both are being imported into a JavaScript file, which is imported as a module into my index HTML file.
I have tried adding Popper to the JavaScript file which contains my imports. This did not work. I would need the dropdown to open below my navbar. What is interesting is that adding my navbar to a website, such as StackBlitz, it works perfectly fine. I feel this has something to do with my npm configuration. I have attached my code below.
Navbar Code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">ABCalc</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Account
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Javascript Imports:
import { createPopper } from '#popperjs/core';
import bootstrap from 'bootstrap';
You need to add the class dropdown-menu to your outer <ul> on line 8 of your code snippet, like so:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">ABCalc</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- next line modified to add dropdown-menu class -->
<ul class="dropdown-menu navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Account
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I am building navbar using bootstrap 5 in Angular 11
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand" routerLink="/">O$hop</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">
<a class="nav-link" routerLink="/shopping-cart">Shopping Cart</a>
</li>
<ng-template #anonymousUser>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ng-template>
<li
ngbDropdown
*ngIf="appUser; else anonymousUser"
class="nav-item dropdown"
>
<a
ngbDropdownToggle
class="nav-link dropdown-toggle"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>{{ appUser.name }}</a
>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" routerLink="/my/orders">My Orders</a>
<ng-container *ngIf="appUser.isAdmin">
<a class="dropdown-item" routerLink="/admin/orders"
>Manage Orders</a
>
<a class="dropdown-item" routerLink="/admin/products"
>Manage Products</a
></ng-container
>
<a class="dropdown-item" (click)="logout()">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
But on mobile screen, collpase button is not showing Shopping cart and dropdown toggle links..Any help ..I am new to Bootstrap....Attaching ss..
Fullscreen on desktop
When viewing on small screen
I think you are missing the JS that is needed for bootstrap 5 for it to work.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
You can read more about it here:
Bootstrap Introduction
I am using Bootstrap 4. In the dropdown section, the dropdown items are displayed vertically, i.e. one below the other. I these dropdown items displayed horizontally, i.e. one beside the other.
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="index.html">Brand Name</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 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>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
In the above code, I want the elements with "dropdown-item" class to be displayed one beside the other. I have used the above code from bootstrap website, version 4.3.1.
I think you have to overwrite .dropdown-menu class's CSS. So instead of overwriting this class directly, give a custom class say .dd-horizontal and add CSS below.
.dd-horizontal {
display: flex;
}
Also, you need to adjust other CSS props as well.
According to the basic bootstrap documentation using .navbar-inverse should change the font color of the items to white:
<nav class="navbar sticky-top navbar-inverse bg-primary">
<a class="navbar-brand" href="#">Brand</a>
<a class="nav-item" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item" href="#">Link</a>
<a class="nav-item" href="#">Disabled</a>
</nav>
However, the items in my navbar have a font color identical to the background.
I can override this using
.navbar a {
color:white;
}
But I'd rather use bootstrap out of the box, and this is such a basic feature that I shouldn't have to override it?
Here is template using bootstrap 4:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
I think what you are doing wrong might be the fact that you are not using <ul> > <li> html tags to put the links inside. Try to wrap them with appropriate html tags and see if the theme will be changed accordingly.
Here you have a working fiddle: here
Thanks all for your comments. I actually copied and pasted my own code from this question back to codepen.io and now it works. Maybe an issue with codepen or my browser...
Found out what was the actual problem, it says right in the first sentence on the bootstrap doc:
Navbars require a wrapping .navbar with .navbar-toggleable-* for
responsive collapsing and color scheme classes.
I didn't use .navbar-toggleable-*
I'm tinkering with a nav in bootstrap 4, building instead of templating, and for some reason my dropdowns just aren't working. I click them and they take me to the whatever site I've got plugged in, instead of showing me options to choose. For that matter, my toggler for the hamburger isn't working either. Any ideas?
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #0E0B16;">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="home.html">EX</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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="bio.html">Bio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu" aria-labelledby="dropdownPortfolio">
<a class="dropdown-item" href="filmportfolio.html">Film</a>
<a class="dropdown-item" href="stageportfolio.html">Stage</a>
<a class="dropdown-item" href="beautyportfolio.html">Beauty</a>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-sub pull-right">
<li class = "navbar-text"><i class="fa fa-phone" aria-hidden="true"></i> 555-555-5555</li>
<li class= "navbar-text"><i class="fa fa-envelope-o" aria-hidden="true"></i> ex#example.com</li>
</ul>
</div>
</nav>
Without seeing the full page code, this is only an educated guess, but, it sounds like you left out jquery and/or bootstrap.js/bootstrap.min.js. The hamburger show/collapse and dropdowns depend on that .js file.