So I'm following a tutorial online (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/) and following the code exactly, but for some reason, my navbar is not appearing the way it should be. My friend (who's way more experienced with web dev) took a quick look at the code and couldn't figure out what was wrong. So I thought I'd post my problem here.
I'll also show you my working directory (just in case you're wondering if the files are all in the same directory):
Here's the code in case you want to try it yourself
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I had a similar problem using bootstrap v4. The previous answers code worked well for me but just wanted to clarify that the part that made the vertical navbar horizontal was to use navbar-expand-lg in the main div tag.
<nav class="navbar navbar-expand-lg">
Changing the lg to another size (md, sm or xs) is also helpful depending on your screen sizing preferences.
Hope this helps
I'm asuming you are using the latest Bootstrap.
You have to add navbar-defaultto your <div class="navbar"> and navbar-nav to your <ul class="nav">.
Which gives you the following markup.
<div class="container">
<h1>Bootstrap Site</h1>
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Working Example
For future problems, try reading the official Bootstrap Docs before asking here. They explained everything very detailed.
BT Navbar
I guess your problem is, that the sitepoint tutorial uses an older Bootstrap Version, than the one you downloaded and use.
If you want your navbar to be always horizontal just make it like this:
<nav class="navbar navbar-expand">
Using navbar-expand-lg|md|sm will make it always break at some point to vertical position.
In my case I was trying some codes I found on internet based on Bootstrap version 3 but my app was based on bootstrap version 4. There exist important differences between the two versions (see here).
The following code based on v4 works for me :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<a class="nav-link" href="#">Link</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>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The official documentation can be found here.
came across your question because I was looking to create a vertical navbar with bootstrap. I know that this question is to do the exact opposite, but since this thread was at the top of the pile on google while searching "bootstrap nav list vertical", I figured I'd leave the solution I found here.
For anyone who can't seem to get bootstrap to behave and render a vertical list, you can use the bootstrap class ".flex-column" in your tag to turn a horizontal list into a vertical one.
Here's the page in the Bootstrap documentation, scroll down till you find the subheading 'Vertical':
Cheers!
we should use pills or tabs //A grey horizontal navbar that becomes vertical on small screens // for tabs use - nav nav-tabs
<nav class="navbar navbar-expand-sm-bg-light">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href ="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href ="#">Projects</a></li>
</ul>
</nav>
Change the class of the ul tag to <ul class="nav navbar-nav">.
Related
I am trying to create a responsive navbar that works in a fashion such that I have two sets of right-aligned links. The first set should collapse, but the second set should remain visible at all times, with the toggler to the left of the latter set of links. That means, in the snippet below, that "Link One", "Link Two", and "Link Three" should collapse, but "Link Four" and "Link Five" should remain visible. This is a very simplified version of what Facebook does with their navbar.
Unfortunately, this is the closest that I have been able to get, though. Before the toggler is shown, everything is where it should be. When I expand, however, "Link Four" and "Link Five" drop to the bottom of the navbar, instead of staying at the top. I have tried manipulating the second set of links directly, via CSS, and could also not seem to accomplish what I was looking for.
Any feedback would be greatly appreciated, as front-end development is definitely not my strong suit.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
[Brand]
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Link One
</li>
<li class="nav-item">
Link Two
</li>
<li class="nav-item">
Link Three
</li>
</ul>
</div>
<ul class="navbar-nav ms-auto flex-row">
<li class="nav-item">
Link Four
</li>
<li class="nav-item">
Link Five
</li>
</ul>
</nav>
Looks like you just need to use the ordering classes to get what you want. In this case order-md-last on the 2nd set of links, and then they will be natural order (2) on less than md breakpoints (xs,sm):
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
[Brand]
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ms-auto flex-row order-md-last">
<li class="nav-item">
Link Four
</li>
<li class="nav-item">
Link Five
</li>
</ul>
<div class="collapse navbar-collapse" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
Link One
</li>
<li class="nav-item">
Link Two
</li>
<li class="nav-item">
Link Three
</li>
</ul>
</div>
</nav>
responsive demo
Wondering why my Bootstrap toggler isn't working. Viewed a few other thread on a similar issue appearing, but didn't find an appropriate solution since everything seems in order.
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
Frontend Bootcamp\
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
What You'll Learn
</li>
<li class="nav-item">
Questions
</li>
<li class="nav-item">
Instructors
</li>
</ul>
</div>
</div>
</nav>
</html>
if you are questioning why your icon does not appear, it's because of it's color, use text-white class to make it visible (or add .navbar-inverse to your navbar)
if your collapse is not working it's probably because you did not link bootstrap.js in your project
https://jsfiddle.net/mahdiar_mansouri/3u5jvw1d/5/
this fiddle is based on your code, it has the icon visible (two icons actually, one from bs itself another from bootstrap icon package) and it's collapse is working fine
I am trying to make a navbar that changes the style of a particular navbar link to active as the user scrolls down the page. I am trying to do this using Bootstrap's scrollspy feature.
I checked and there are many comprehensible tutorials on this (e.g. https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp or https://mdbootstrap.com/docs/standard/navigation/scrollspy/#example-3).
Although I believe I followed them to the letter, the effect just does not seem to work. I am afraid this may have to do something with the changes to mechanics of the spyscroll feature due to the abandonment of JQuery by BS5. But it very well may by an error in my code, although I did my best to follow the tutorials to the letter.
My code:
(a) included external files:
<link rel="stylesheet" href="BS5/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="BS5/css/styles.css" /> <!-- BS customising css -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="BS5/js/bootstrap.js"></script>
<script src="BS5/js/jsko.js"></script> <!-- non related custom scripts -->
(b) style tag
<style>
body
{
position: relative;
}
</style>
(c) body tag
<body data-spy="scroll" data-target="#navbarko">
(d) navbar tag
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top nav-larger" id="navbarko">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"/></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 justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mission">Our mission</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#debt">Debt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#finadv">Finland</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#references">References</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
(e) beginning of the section tags throughout the page:
<section class="feature grad_third" id="mission">
<section class="feature grad_third" id="debt">
<section class="feature grad_third" id="finadv">
<section class="companies references" id="references">
<section class="feature grad_third" id="contact">
Many thanks beforehand for your time and help.
Things have changed slightly in Bootstrap 5 - and the W3Schools tutorial is Bootstrap 4.
So you need to change your body tag to (note the 'bs', for Bootstrap):-
data-bs-spy="scroll"
More on this here:-
https://getbootstrap.com/docs/5.0/migration/#javascript
Data attributes for all JavaScript plugins are now namespaced to help
distinguish Bootstrap functionality from third parties and your own
code. For example, we use data-bs-toggle instead of data-toggle.
I cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)
I am following the example to use the Navbar from http://getbootstrap.com/components/#navbar-default, however, I am having problem to make it display horizontally like in the example. The code below is the same from the page. What am I missing to make it to display horizontally?
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body id="bs-example-navbar-collapse-1">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
Try using ul class="nav nav-pills navbar-right".
I am not 100% sure that "my" problem was exactly the same as the original posters, but it looks very similar and the same solution could apply.
In my case, the problem manifested when the navbar was used within an Angular application with the "developer tools" on the side. This was reducing the width of the page made available to bootstrap, below a certain threshold (see below), which in turn made the navbar items to show on a column instead of a row.
The outermost navbar definition, as of the documentation sample, looked like this:
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
...
</div>
</nav>
After I checked the various element classes / styles in the browser, as well as the Bootstrap documentation, it seems that the following constraints apply:
The layout of the li elements is not directly controlled by the parent ul, but by the main nav element.
This one may bear a flex-direction: row style, and in this case the navbar items are shown horizontally, exactly as in the documentation samples. However, this style is conditioned by a minimum page width.
If the page is not wide enough, this style is not applied, the navbar is shown as collapsed and the "Toggle collapse" button is shown.
When expanding the navbar via the "Toggle collapse" button, the navbar items are always shown vertically, no matter how wide the page is.
Now the anomaly seems to be related to Bootstrap mistakenly deciding that the navbar items won't fit within a given page width, while common sense says they will. (In my case, it switched to collapsed navbar when the items would only need 40% of the available page width).
As stated by the documentation page, this is controlled (in the snippet above) via the navbar-expand-lg class, and more specifically the "lg" suffix. This explicitly refers to a specific display width. Changing this suffix (towards lower widths) triggers the presentation switch - from expanded to collapsed - in a way more appropriate for the actual navbar content. Concretely, in my case changing to navbar-expand-sm made the navbar behave as expected as the page gets wider or narrower.
At first view, this solution could affect the page portability across devices. However, I don't think this is the case because it is not about specifying an expected page with, but a minimum page width to accommodate the navbar - which does not depend on the device.
From the way I had read your question, I get that you are trying to get it vertically instead of horizontally. It's at least an assumption from your code example that is already horizontal. :)
A nav list with the class flex-column should to the trick for the list itself. Found this over at the Bootstrap documentation itself under there available styles. An example of this list itself could look something like this:
<ul class="nav flex-column nav-link">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<form class="my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</ul>
Most of the things bootstrap has for a navbar seem to work with this. This is at least with the things I have used until now.