When I shrink the window and there is no toggle button on screen. But pointer change like it is button.
I read all forum and applied many solutions but nothing change.
My css : bootstrap 3.3.7 min.css
my js : bootstrap min.js & jquery.min.js 3.2.0
Here is my header.html template:
<div class="navbar-wrapper">
<div class="container">
<!-- Navbar Start -->
<nav class="navbar navbar navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<!-- Telefon ekranları için menü butonu -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- İsim Soyisim veya Marka İsmi -->
Bu Kim Lan
</div>
<!--<img src="static\img\qm8.ico" alt="Anasayfa" width=20" height="20" >-->
<nav class="collapse navbar-collapse" role="navigation">
<!-- Arama Çubuğu -->
<form class="navbar-form navbar-left" role="search" method="GET" action="">
<div class="input-group">
<input class="form-control" type="text" name="q" placeholder="Başlıkta Ara" value="{{ request.GET.q }}" >
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Ara">
</span>
</div>
</form>
<!-- Temel Sayfalar -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Anasayfa</li>
<li>Gönder Gelsin</li>
<!--<li>Blog</li>-->
{% if request.user.is_authenticated %}
<li>TT</li>
{% endif %}
{% if not request.user.is_authenticated %}
<li>Üye Ol</li>
<li>Giriş Yap</li>
{% else %}
<li>Çıkış</li>
{% endif %}
</ul>
</div>
</nav>
</div>
</nav>
</div>
Thanks for your help.
you lost navbar-default on class="navbar-wrapper navbar-default"(line 1)
your data-target="#navbar" should be target to nav class="collapse navbar-collapse" id="navbar" role="navigation"(line 26)
Please check below links:
Official Sample
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
Bu Kim Lan
</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>Anasayfa</li>
<li>Gönder Gelsin</li>
<!--<li>Blog</li>-->
<li>TT</li>
<li>Üye Ol</li>
<li>Giriş Yap</li>
<li>Çıkış</li>
</ul>
<form class="navbar-form navbar-left" role="search" method="GET" action="">
<div class="input-group">
<input class="form-control" type="text" name="q" placeholder="Başlıkta Ara" value="{{ request.GET.q }}">
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Ara">
</span>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Related
I was working on the tutorial to build a simple website, when I tried running the bootstrap template, it does not seem to show up
The screenshot of the website
I've included the bootstrap.js file as well as the jquery, here's my code to take a look at:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="/css/bootstrap.css">
<script src ="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<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="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
</body>
</html>
From your screenshot, I would guess that /css/bootstrap.css is returning a 404, or you are using the browser's ability to load HTML from the file system (by double clicking on your index.html file) in which case the reference /css/bootstrap.css is looking for a folder on your root drive with the path /css/bootstrap.css. If you have the css file int he same folder just drop the /css/ and it should work.
Looks fine to me. As Jason mentioned, I think your local bootstrap file isn't being called correctly.
.row {
margin-top: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
Looks like your css/boostrap is not linked correctly, if your doing this on your local machine try view source and click the css path if its there. and jquery and boostrap.js must be place before the body tags ends.
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<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="#">Kevo's Website</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<h1>Welcome</h1>
<p>This is the welcome page</p>
</div>
</div><!-- /.container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I have and issue with bootstrap3 navbar-menu on a smaller viewport. When I go to response mode in inspector and click on a hamburger icon I don't see any interaction, debug tool is not showing any error, and I have all standard bootstrap3 navbar collapse class code to support smaller viewport, I'm just overlooking something.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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 'index' %}"><img src="static/img/SNYClogo.png" height=50 width=110></a>
</div>
<div class="navbar-collapse collapse">
<ul id="navbar" class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Apartments</li>
<li>About</li>
{% if user.is_authenticated %}
<li><a id="logout" href="/accounts/logout">Logout</a></li>
{% else %}
<li class="pull-right" id="showlogin"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
{% endif %}
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
Can someone please check this JSFIDDLE, and inspect mine code.
Give .navbar id to parent div not ul.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#"><img src="..." height=50 width=110></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Apartments</li>
<li>About</li>
{% if user.is_authenticated %}
<li><a id="logout" href="/accounts/logout">Logout</a></li>
{% else %}
<li class="pull-right" id="showlogin"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
{% endif %}
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
Fiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li>MANUALS</li>
<li>NEWS</li>
<li>SPARE PART</li>
<li>WHERE TO BUY</li>
<li>SUPPORT</li>
<li>EDIT BOOK</li>
<li>ADMIN</li>
<!-- <li>LOG OUT</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>
I am using bootstrap for my responsive navbar on mobile view.
When I click the button and the navbar menu is display from top to down.
What should I do to can make it from left to right?(Remember to resize your windows to mobile size).
You can check out this popular Bootstrap fork available: Jasny Bootstrap
It has the same slide in from left effect.
<link href="http://www.jasny.net/bootstrap/dist/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://www.jasny.net/bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
You need to override following two properties to archive this. Here you should also use pull-left bootstrap class, this class element move into left side only but doesn't set margin. I thought you should override base on the requirement.
.nav-left{
float: left !important;
margin: 8px 15px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed nav-left" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li>MANUALS</li>
<li>NEWS</li>
<li>SPARE PART</li>
<li>WHERE TO BUY</li>
<li>SUPPORT</li>
<li>EDIT BOOK</li>
<li>ADMIN</li>
<!-- <li>LOG OUT</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>
With the Jasny Bootstrap slide-in plug-in, the default class is "navmenu-fixed-left". You can change the class to "navmenu-fixed-right" to make the menu slide in from the right side:
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li>About</li>
<li>Capabilities</li>
</ul>
</div>
If you also want the toggle button to appear on the right side, you need to adjust some CSS:
.navbar-default .navbar-toggle-box {
float: right;
margin-left: 15px;
margin-right: 0;
margin-top: 0;
position: absolute;
right: 0;
}
I loaded bootstrap css and js files and added the html code of following.
Both are succesfully loaded - css in head tag and js below footer. Other functions are also working fine.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container container-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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_for('public.home') }}">
NekTime
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
{% if current_user and current_user.is_authenticated() %}
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a></p>
</li>
<li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></a></li>
</ul>
{% elif form %}
<ul class="nav navbar-nav navbar-right">
<li>Create account</li>
</ul>
<form id="loginForm" method="POST" class="navbar-form form-inline navbar-right" action="/" role="login">
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.username(placeholder="Username", class_="form-control") }}
{{ form.password(placeholder="Password", class_="form-control") }}
</div>
<button type="submit" class="btn btn-default">Log in</button>
</form>
{% endif %}
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
When I shrink the browser, the toggle button replaces other menus, but I cannot expand that toggle button.
I managed to get the right data-target.. i don't know what to do next
I added the collapsed class in the button tag, and it works. Look the following code.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse">
It worked the next day..when I changed the code for loading jquery. Guess the previous code to bring jquery did not work properly.
Bootstrap JS/CSS is appending transparent space to the bottom of a NavBar inside a <td> in my home page. This shows a live preview of the issue I'm having with the default bootstrap configuration of NavBars.
Here is a complete, (minus the inclusion of the bootstrap files) and minimal example of the code I wrote to create the NavBar.
<html>
<body>
<table align="center" border="1px"><tr>
<td>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="index.html">Home</a>
</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 navbar-right">
<li>
About Us
</li>
<li>
Contact Us
</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</td></tr>
</table>
</html>
Any help is appreciated.
Cheers.
You can update the css class "navbar" with updated margin.
.navbar { margin-bottom: 0 }
Fiddle: http://jsfiddle.net/kiranvarthi/jmJWr/24/
The cleanest solution for this is, when you export your boostrap version from here, just edit the #navbar-margin-bottom field, you should set it to 0px insted of #line-height-computed (default value).