I am using Angular 12 and Bootstrap 5 to create a SPA. I created a shared navbar component. When my navbar changes to the hamburger menu button, the navbar does collapse as intended. But when i try to close it, there is no reaction. Am i missing something?
<nav class="navbar fixed-top navbar-expand-md navbar-dark shadow">
<div class="container-fluid">
<a class="navbar-brand" routerLink="/someUrl">Foo</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarToggleContent"
aria-controls="navbarToggleContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggleContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item p-2">
Item 1
</li>
<li class="nav-item p-2">
Item 2
</li>
<li class="nav-item p-2">
Item 3
</li>
</ul>
</div>
</div>
</nav>
This code is fine. I forget to add the popper.js entry to my angular.json file.
Related
aight hello there, so im using bootstrap 4 and trying to create a navbar menu
here is my code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</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>
</ul>
</div>
<ul class="navbar-nav"><li class="nav-item">Login</li></ul>
</nav>
So what im trying here is I want a navbar menu and some items but I want some items not be collapsed and at the same time to be in the right.
I tried moving the item I want to be in the right moved to after toggler button and it's working exactly as I want, but in small devices and in desktop device it shows back to the left.
I tried moving the item I want to be in the right after the div collapse element but it collapses in small devices.
The problem was solved by separating the navbars into two separate divs, using bootstrap4 row and col, and giving a padding of 0 to the two separate divs. I used an in-line style to position the Login item but this is just for illustration purposes. It would be better to convert the in-line style into a class.
<div class="container-fluid">
<div class="row">
<div class="col-8 p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="height:4rem;">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</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>
</ul>
</div>
</nav>
</div>
<div class="col-4 p-0 ">
<nav class="navbar-nav navbar-light bg-light" style="height:4rem;">
<ul class=" list-unstyled mr-4" style="margin-top:1rem;"> <li class=" float-right">Login</li>
</ul>
</nav>
</div>
</div>
</div>
I've tried to make a navbar which looks like this:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
CIDashboard
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item">
LOG OUT
</li>
<li class="nav-item">
USER
</li>
</ul>
</div>
</nav>
My problem is that I have a space in the right side of the navbar.
How can I resolve this problem?
I basically have a pretty simple question, but my portfolio will look better if I can make this simple addition.
I want my NavBar in bootstrap to be in 3 columns, essentially like the image I've mocked up below.
I currently have the base bootstrap navBar setup with the default code like so:
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-white fixed-top">
<div class="container">
<a class="nav-link" href="#">my name goes here</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">about</a></li>
<li class="nav-item"><a class="nav-link" href="#">resume</a></li>
</ul>
</div>
</div>
</nav>
I can make a weird version look right with messing with padding and stuff, but I dont want that. The hardest part for me is understanding the responsive version, and having the one link on the left (work) and two links on the right (about, resume) merge into one dropdown navigation and have the 'my name goes here' become the header above it on mobile.
Any help, or a point in the right direction would be great.
Also, it can be assumed my CSS is the base bootstrap CSS.
Thanks
UPDATE
<!-- Navigation -->
<nav class="navbar navbar-light navbar-expand-md bg-success justify-content-between">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link pl-0" href="#">work <span class="sr-only">work</span></a>
</li>
</ul>
</div>
Colin Grant
<div class="navbar-collapse collapse dual-nav w-50 order-2">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="">about</a></li>
<li class="nav-item"><a class="nav-link" href="">resume</a></li>
</ul>
</div>
</div>
This seems to work perfectly, any tips for makign it better?
Thanks
Following is how I did it using bootstrap 4. When screen size is <992px right side of the navbar will collapse into a button.
<nav class="navbar navbar-expand-lg navbar-dark bg_color_primary sticky-top d-flex justify-content-between ">
<div class="navbar-nav col-4 align-items-start ">
<div class="text-white bg_color_primary_light rounded-circle p-2">
Work
</div>
</div>
<div class="col-4 d-flex justify-content-center">
<a class="navbar-brand text-white brand_name " href="">
BrandName
</a>
</div>
<button class=" navbar-toggler ml-auto align-items-end" 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 col-4 " id="navbarNavDropdown">
<div class="navbar-nav ml-auto ">
<a class="nav-item nav-link" href="">About</a>
<a class="nav-item nav-link" href="">Resume</a>
</div>
</div>
</nav>
i have class for replacing my class container i called it container-mini
so far good not problem but when, in the mobile screen it have problem on hamburger menu like this
here my simple header code
<nav class="navbar navbar-toggleable-md navbar-light my-4" id="navna">
<div class="container-mini">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#site-nav" aria-controls="site-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand logona" href="/dusbam/id/">
<h1>LOGO</h1>
</a>
<div class="collapse navbar-collapse" id="site-nav">
<ul class="navbar-nav text-sm-left ml-auto">
<li class="nav-item">
<a class="nav-link" href="/dusbam/id/rooms">Kamar</a>
</li>
</ul>
</div>
</div>
</nav>
but when i replace container-mini with container it's fine like this
so my question is how to make hamburger menu like pict 2 without class container
I have a div containing 3 dropdowns which sit under the navbar on a normal desktop window. Additionally, I have a couple of links which are right-justified in the navbar. On a page break, I'd like for the dropdown div to collapse into the the navbar along with the right-justified links.
Here's what I have so far:
<nav class="navbar navbar-default navbar-expand-lg fixed-top navbar-dark bg-dark" role="navigation" id="topnav">
<div class="container-fluid" id="nav_content">
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navredirect,#dropdowns" aria-controls="navredirect" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navredirect" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<div class="row mx-auto justify-content-center" id="dropdowns">
<!-- NOTE: dropdowns are auto-populated with a jQuery script -->
<label>Name:</label>
<select id="name"></select>
<label>State:</label>
<select id="state"></select>
<label>Item:</label>
<select id="item"></select>
</div>
</div>
Right now the redirect links in the navbar are being collapsed properly, but the dropdowns (which I assign as one of the data-targets in the collapse button) are not responding to the page break. Does Bootstrap let you move an external element into the navbar like this?
I'll figure out the eventual styling of the dropdown elements once I get them into the nav. For now I just need to get them up there and I can't figure out how for the life of me. Any ideas?