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.
Related
I'm trying to use a bootstrap side navbar.
<nav id="sidebar" [(class.slide-in)]="slideIn" >
<div class="sidebar-header">
<img alt="Home" height="65" src="/assets/images/angular-logo.png" title="Home" width="150" class="ng-star-inserted">
</div>
<ul class="list-unstyled components">
<p>Content</p>
<li id="sidebar-list" style="border:2px;">
<a [routerLink]="['/HistoryOfAngular']">History of Angular</a>
</li>
<li id="sidebar-list">
Hello World
</li>
<li id="sidebar-list">
Data Binding
</li>
</ul>-->
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<button (click)="toggleSidebar()" style="margin:0px;border-radius: 0px; height: 50px;" type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>MENU</span>
</button>
</div>
</nav>
I am toggling the side nav with some js code in tag but the script tag doesnt run in angular 5. How could I toggle it. I thought have some code in my .ts file like
toggleSidebar():void{
}
Im not sure of what to put in it to toggle it. The code to toggle in the script tag is
<script >
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
console.log("HII");
});
});
console.log("HII");
</script>
<nav class="navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<b>
<a class="navbar-brand" href="#">
Title
</a>
</b>
<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">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="route1">Route1</a></li>
<li routerLinkActive="active"><a routerLink="route2">Route2</a></li>
<li routerLinkActive="active"><a routerLink="route3">Route3</a></li>
</ul>
</div>
</div>
</nav>
This is from https://bootswatch.com/darkly/
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>
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
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).
I am using Bootstrap for the first time and my navbar is not collapsing. So in response to this question on SO, I checked the order of jquery and Bootstrap js files and its OK.
When I checked the Network tab to check if all resources are loading correctly, I am getting jquery.min.map error that it can't be loaded.
Is my problem related due to this missing file and why Bootstrap is asking for this file?
Here is the image :
And when I further decrease the screen width, the links and search disappear and the expand button also does not appear.
Here is my code for navbar for the reference
<div class="container" id="main">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
FAQ
</li>
<li class="dropdown">
Founders <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Naveen</li>
<li>Sumit</li>
<li>Sanjeev</li>
<li class="divider"></li>
<li>Naveen</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul class="nav navar-nav pull-right">
<li>
<span class="glyphicon glyphicon-user"></span> My Account
</li>
</ul>
</div>
</div>
</nav>
</div>
You left out part of your nav html under 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>
Here is a jsFiddle