I have these 4 buttons, that each of them works if it is the first to be pressed but after pressing one of them all the buttons stop working.
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">BusTracker</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="#services">Serviços</a>
</li>
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="#about">Sobre nós</a>
</li>
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="#team">Equipa</a>
</li>
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="#faq">FAQ</a>
</li>
</div>
</div>
</nav>
Related
This is for a course project.
I want the brand to stay left-aligned, but the other items to align to the right.
I can do it when there's no toggler, using justify-content-end
But with a toggler, nothing works.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Download</a>
</li>
</ul>
</div>
</div>
</nav>
Thanks
You can replace class=me-auto in the ul tag with class=ms-auto
I am trying to add a header as part of my navigation but below it like this:
I have tried adding another row using bootstrap however it just comes out like this:
this is my code:
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bunk.</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#landlord">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
</ul>
</div>
<div class="row">
<header id="header">
<div class="container">
<div class="row">
<h2> Tenants </h2>
</div>
</div>
</header>
</div>
any suggestions?
Read more about Bootstrap's Navbar and grid.
The navbar should only contain supported content.
The header shouldn't be in the navbar, put it below.
.container shouldn't be nested in other .containers.
.row is meant to contain only col-*.
Demo on Codeply
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bunk.</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#landlord">LANDLORD</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid bg-light">
<header id="header" class="d-flex align-items-center">
<h2 class="mx-auto">Tenants</h2>
</header>
</div>
I have this:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">Navbar</a>
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
But I do not know how to put the navbar-brand to the right in Bootstrap 4.
Use flex-row-reverse class in your navbar to just reverse the order
Also use navbar-toggler-left instead of navbar-toggler-right to your toggle button to align it left in smaller screens
Stack Snippet
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar flex-row-reverse navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-left" 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>
<a class="navbar-brand" href="#">Navbar</a>
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Fiddle Link
I have a problem with my bootstrap 4 navbar.
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<container class="container">
<a class="navbar-brand js-scroll-trigger" href="#top">MOEINICH</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars fa-2x"></i>
</button>
<container class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">contact</a>
</li>
</ul>
</container>
</container>
</nav>
and the css:
https://pastebin.com/2D5HVmVy (for some reason, I couldnt paste it into the code tags)
I have put together a landing page with Bootstrap and for some reason, the navbar is not fixed. Below is the code for the navbar.
<nav class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-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 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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<a class="navbar-brand pull-sm-right mr-10" href="#">Aquastars Swimming School</a>
</div>
</nav>
Your code is working fine, as you are using bootstrap 4.
you can seen the working demo of your code here Codepen
<nav class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-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 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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<a class="navbar-brand pull-sm-right mr-10" href="#">Aquastars Swimming School</a>
</div>
</nav>