I'm working on a site using the new Bootstrap 4 for a group that unfortunately has a long name and as a result, I am having issues with displayed this name in the navbar. As shown in the picture below, the long name has caused the burger button (the 3 line thing) that opens up the nav options has dropped down to a second line. Due to complicated issues relating to Scrollspy I need to prevent this to ensure that the navbar is the same height regardless of device screen size. Is there a way I could either prevent this from happening or set mobiles to have a different shorter title text, such as "Webpage Name", which would allow the name to fit beside the burger button. I know this was possible in Bootstrap 3, however, I cannot find a working alternative in Bootstrap 4.
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="main-nav-bar">
<a class="navbar-brand" href="#home">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" class="navbar-sqnlogo d-inline-block align-top">Annoying Long Webpage Name</a>
<button class="navbar-toggler" 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 ml-auto">
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link active" href="#about" id="aboutlink">About</a></li>
<li class="nav-item"><a class="nav-link" href="#whatwedo">What We Do</a></li>
<li class="nav-item"><a class="nav-link" href="#join">Join</a></li>
</ul>
</div>
</nav>
Here is the solution I found for Bootstrap v4-beta:
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="main-nav-bar">
<a class="navbar-brand" href="#home">
<img src="img/logo.png" class="navbar-sqnlogo d-inline-block align-top">
Long <span class="d-none d-md-inline">Web Page </span>Name
</a>
<button class="navbar-toggler" 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 ml-auto">
<li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#about" id="aboutlink">About</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#whatwedo">What We Do</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="collapse" data-target="#navbarNav" href="#join">Join</a></li>
</ul>
</div>
</nav
For reference, the classes d-*-* do this.
Related
I am trying to use navbar with fixed-top class so that the menu will not pull down the element of the page when it is collapsed. But when I use the fixed-top class, the navbar will go over the container (in width) as if it was inside a container-fluid while i use a container class to have the menu and the site in the middle of the page (not a full width). Is there a way to have a navbar with fixed-top but not at full width?
This is the code:
<div class="container" style="border: 1px solid;">
<nav class="navbar fixed-top navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="n-index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatti</a>
</li>
</ul>
</div>
</div>
</nav>
</div> <!-- end container -->
When using position:fixed the element is removed from the normal DOM flow so it no longer relates to other page elements including its parent container.
If you want limit the navbar to the container width, use the container inside the navbar to wrap the navbar content...
<nav class="navbar fixed-top navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="n-index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove Siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatti</a>
</li>
</ul>
</div>
</div>
</nav>
https://codeply.com/p/AFQj4wf6DD
when I clicked on the hamburger menu it used to work then suddenly stopped
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</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">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
I've included bootstrap and jquery .
I have a simple question regarding bootstrap4
I am trying to follow the documentation in order to properly add a nav bar to my app.
But for some reason the toggle seem to be always on when I am on a full width browser. I even copy past the code from the doc but the toggle is still on ..
What is going on?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
here is the fiddle:
https://jsfiddle.net/phknncry/1/
I get that:
when I should get:
I'm new to Bootstrap CSS. I took this code directly from Bootstrap 4.0 Beta page example (https://getbootstrap.com/docs/4.0/components/navbar/).
In the Boostrap example page, this code works and shows navigations on desktop browsers, but when I use this code in my page, it does not show the navigations on the desktop browsers by default; it is showing the hamburger menu by default on any size browser.
Any help greatly appreciated.
<div class="row-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
What you posted seems to run fine. Is there any more code you can add to your example?
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
</div>
I found the problem. I upgraded Chrome to the latest version and now it works.
It's a bug, copy the contents of bootstrap.min.js from the previous version and it should be working.
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 5 years ago.
This is the code. I need to move navbar(without logo) to right side.
So I added float-right to like <div class="collapse navbar-collapse float-right" id="navbarSupportedContent">.
But it did not worked.
Full Code
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Popular Quotes Collection</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 float-right" 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="#">Submit a Quote</a>
</li>
</ul>
</div>
</nav>
Simply add:
.justify-content-end to .navbar-collapse
Remove floats, bootstrap 4 is flexbox by default so you can take advantage of this.
Like this:
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
Working Resizable Fiddle
You can not use float because bs4 use display: flex;
You can use class: 'justify-content-between' or get more about bootstrap4 flex class on this page https://getbootstrap.com/docs/4.0/utilities/flex/
You don't actually need to apply float-right at all, but rather navbar-toggler-right:
<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 navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Popular Quotes Collection</a>
<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">Toggle</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="#">Submit a Quote</a>
</li>
</ul>
</div>
</nav>
Hope this helps! :)