My Bootstrap Navbar isn't working on mobile phone view (when it can't display the links). I can't click the button. After many research on Internet and StackOverflow, I tried out the solution and no one works. These are the solutions that I tried;
Verify the data-target and id. As here Check
Add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> Here Check
Add CSS .dropdown-backdrop { position: static; } On Stack, somewhere
Here is my navbar code;
<nav id="layout-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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.php">7 Frères</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" id="navigationbar">
<ul class="nav navbar-nav">
{% for item in staticMenu.menuItems %}
<li class="{% if item.isActive %}active{% endif %}">{{ item.title }}</li>
{% endfor %}
</li>
</ul>
</div>
</div>
</nav>
Thanks!
The issue is that you are not including the Bootstrap Javascript(necessary for using the built-in dropdown menu) on your page. Once you have included that, it should work:
<script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Related
I'm running this ResearchSpace (RS) instance: https://www.magnetic-margins.com
In the header.hbs file, all seems to be set for a use of the navbar on mobile devices, but the dropdown won't work because the collapse event is not triggered, I think. I can make it permanently collapsed for mobiles but I fail to make the actual dropdown work!
RS is using React Bootstrap 3. The corresponding lines in the header.hbs file are:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="rs-header">
<!-- 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="#rs-navbar"
aria-expanded="false" aria-controls="rs-navbar" aria-label="Toggle navigation">
<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="rs-header-logo" href="/" title="{{deploymentTitle}}"><img class="img-responsive" src="https://docs.google.com/drawings/d/e/2PACX-1vRKgdbvCgd7aA4xA3nCR21qrQpFvD6ryeqhLHJ2z15oDVb8lBMVLyPgOwRAiJxpUMVPK7HUvcogCVW9/pub?h=70"/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="rs-navbar">
<ul class="nav navbar-nav">
{{!-- <li>
<semantic-link iri="http://www.researchspace.org/resource/ThinkingFrames"
urlqueryparam-view='system-projects' class="rs-body-m-B" style="padding-left: 60px;">
Projects
</semantic-link>
</li> --}}
</ul>
<ul class="nav navbar-nav icon-btns-container">
<li>
<semantic-link uri="http://www.researchspace.org/resource/magnet_Persons">
<div class="nav-iconAndLabel">
<i class="fa fa-users"></i>
<div>Persons</div>
</div>
</semantic-link>
</li>
...
This bug seems to apply to all RS instances I checked, but, e.g., works on a Metaphacts implementation of http://db.sphaera.mpiwg-berlin.mpg.de/resource/Start
This is probably some sort of silly misunderstanding, but I'm trying to include some Jinja code in my HTML file, as in this file which I found on github:
{% extends "bootstrap/base.html" %}
{% block title %}
Demo App
{% endblock %}
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='starter-
template.css')}}">
{% endblock %}
{% block content %}
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
{% endblock %}
You'll see that the Jinja code is enclosed in the "{% ... %}." However, when I run this file in my web browser, I get the following:
As you can see at the top of the screenshot, instead of executing the Jinja code, the Jinja is being read as HTML text. How can this be fixed?
Thank you!
the jinja templates are not supposed to be viewed in browsers. flask will generate and serve proper html, generated from your templates, when requested.
I have tried just about everything to get the toggle navigation to work and I have had no luck. Is it just a simple mistake or piece of code I'm missing? I have tried loading different scripts but still nothing.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #f2f2f2">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#nav-collapse" style="margin-top: 20px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/home" class="navbar-brand">
<img src="img/evodent-logo.png" alt="evodent-logo" style="width:190px;">
</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
It seems like the code is working just fine as is. Make sure that you are including the bootstrap.min.js file on your page as well. As the collapsible components in bootstrap require this plugin/file.
Here is the official documentation on the Bootstrap Navbar that mentions that the plugin is required: http://getbootstrap.com/components/#navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
I have created a nav bar, and styled it my way. However, when I make the window small, and click in the right corner on the button, the nav bar extends all the options and that's it. Once I click on one of the options, it will not close i.e. it will not collapse back. What am I doing wrong? Ive been exploring with this for a while now and cannot see the mistake.
Here is my code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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>
<!-- use a responsive image option so this logo looks good on devices - recommend using something like retina.js -->
<a class="navbar-brand" href="#/">Test</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 navbar-right">
<li>Home
</li>
<li>About Us
</li>
<li>What We Do
</li>
<li>Examples
</li>
<li>Testimonials
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
In my index.html, I link to the header.html which works fine, and the following styles:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
And the javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Clicking the links doesn't automatically collapse/toggle the Bootstrap navbar. This is by design.
If you want them to close after click you can add this to the links..
data-toggle="collapse" data-target=".navbar-collapse.in"
Demo: http://www.codeply.com/go/Ia4LLB8Yyp
You could also use jQuery like this..
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
On a phone sized screen, when I click the hamburger once, the navbar opens fine. When I try to close it, nothing happens - it's stuck. Where have I gone wrong? Here's my html:
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teams-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>
<a class="navbar-brand" href="http://{{base_url}}">My Teams</a>
</div>
<nav class="collapse navbar-collapse" id="teams-navbar-collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>
<a href="{% url 'profile_page' user.pk %}">
My Profile
</a>
</li>
<li>
Logout
</li>
</ul>
{% else %}
{% block login_button %}{% endblock %}
{% endif %}
</nav>
</div>
</header>
I would say this is actually an issue with jQuery Toggle. Please ensure jquery is set to toggle "collapsed". One of the ways bootstrap works is by adding/removing classes to buttons/divs/html elements to display them based on css. For example. Pretty Select dropdowns work by adding "open" to a specific div before or after the select button. Hense you can use jQuery to toggle that open when it's clicked. I hope this helps.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#teams-navbar-collapse">
<script type="text/javascript">
$( document ).ready(function() {
$("button.navbar-toggle").click(function(){
$("button.navbar-toggle").toggleClass("collapse");
});
});
</script>