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 .
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
I need a slide-bar that opens to the right. I want to do this with nav-bar of bootrstrap 4.
Currently The nav-bar opens to down.
I dont want to position it to the right, i want to open it to right.
thannks
<div class="pos-f-t">
<nav class="navbar navbar-dark bg-dark col-2">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse col-2" id="navbarToggleExternalContent">
<nav class="navbar-nav ml-auto bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</div>
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 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.
I am trying to use Bootstrap Navbar and copied the snippet below from the site.
I am trying to position the link with class navbar-brand to the right rather than on left by default but it seems fixed?
I tried to use utility classes to float it and they do not seem to affect it.
Code 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 navbar-toggleable-md navbar-light bg-faded">
<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">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#speakers">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
</ul>
<a class="navbar-brand pull-sm-right??" href="#">Presented by Treehouse</a>
</div>
</nav>
Use ml-auto on the Brand (navbar-brand):
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<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">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#speakers">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
</ul>
<a class="navbar-brand ml-auto" href="#">Presented by Treehouse</a>
</div>
</nav>
Working Demo
Alternatively, you can use mr-auto on the navbar-nav to push the brand right.
Just add mr-auto class to your navbar-brand. That will align it to the right of other links.
Working example
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<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">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#speakers">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
</ul>
<a class="navbar-brand mr-auto" href="#">Presented by Treehouse</a>
</div>
</nav>
Use pull-right on the brand.
Code:
<nav class="navbar navbar-default" role="navigation">
<a class="navbar-brand pull-right" href="#">Brand</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>