I'm trying to mix up the container and container-fluid on my navbar based Bootstrap. Below you can see the picture of my navbar. There is link "Return back" that I want to be on the right side of my brand (only when using devices up to md size).
I would like it to be like this:
And here comes my code (unnecessary excluded).
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>< Return back</li>
</ul>
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#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>
<a class="navbar-brand" href="home">MY WEBSITE</a>
</div>
...
</div>
</nav>
How would that be possible? Thanks in advance.
If you want it between brand and navbar, this could be fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">
< Return back</a>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
<a class="navbar-brand" href="home">MY WEBSITE</a>
</div>
...
</div>
</div>
</nav>
Related
the following code does not show the list items when I press the button instead the list items appear as header in navbar.
<nav id="header-nav" class = "navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1>Food,LLC</h1>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Sandwich</li>
<li>Pizza</li>
<li>Pasta</li>
</ul>
</div>
</div>
</nav>
I am trying to use the bootswatch journal template:
https://bootswatch.com/journal/
So I download the .css file and serve the html file using this css.. but this always ends up with a red and white navbar - which is not what I want.
I am looking for the black and white navbar as show in the page itself.
How do I go about achieving this?
thanks.
The HTML code is like so:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="{% url 'home' %}">title here</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Add item</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Replace navbar-inverse in the following code with navbar-default
<nav class="navbar navbar-inverse navbar-fixed-top">
I have a standard navbar in bootstrap. When it collapses, I see nothing but a hamburger menu button and all li's are folded underneath.
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
When it collapses (mobile/small screen) I would like for the "Store" link to stay visible at the top of the navbar, left of the Hamburger menu. Can I do this using bootstrap's classes, or do I need to do this manually via #media?
Here I got a solution. Try putting the button after
<div class="navbar-header">
and before
<button type="button" class="navbar-toggle collapsed" 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>
Here is a JsFiddle. What I basically did:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="btn btn-default hidden-lg hidden-md hidden-sm" aria-label="Left Align" href="/store">
Store
</button>
<button type="button" class="navbar-toggle collapsed" 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" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Store</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
</div>
Hope I could help you and my answer solved your problem. :)
I'm new to bootstrap I'm having trouble with my navbar I don't want to display the collapsed heading when the page is first opened on a mobile is there any way to do this? I have tried searching the web and have had no luck.
My code is:
<!-- Menu -->
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
The CO-OP Couch
</div>
<div class="collpase navbar-collapse" id="example">
<ul class="nav navbar-nav navbar-right">
<li>PodCasts</li>
<li>Facebook</li>
<li>Community</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
It was all good just the typo error in your class "collapse".
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
The CO-OP Couch
</div>
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav navbar-right">
<li>PodCasts</li>
<li>Facebook</li>
<li>Community</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I have this code for navigation and it's not displaying the 3 horizontal bars that must be displayed when resizing the browser.
Below is my code:
<LINK REL=StyleSheet HREF="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" TYPE="text/css">
<nav class="navbar navbar-invesre">
<div class="container">
<a class="navbar-brand">Team Management</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>Teams List</a>
</li>
<li><a><i class="glyphicon glyphicon-plus"></i>Add Team</a>
</li>
</ul>
</div>
</div>
</nav>
As shown in the code, icon bar should be displayed when resizing the browser, but it's not. Any idea?
As #vanburenx pointed out you simply spelled inverse incorrectly. The hamburger menu, as it's called, is there its just white on white. Change to :
<div class="navbar navbar-inverse">