I found this button tag in the basic bootstrap html template (I added the arrows)
<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>
It's completely invisible (at least to me), and it doesn't seem to have any effect (it doesn't happen anything when I click).
Is it supposed to be like this, and what's the point of it?
Where is the button: That button can be seen when you reduce the webpage width, either by zooming in or using a mobile device to access the webpage.
What is this button for: That button is use to toggle the navbar dropdown on mobile devices.
Those three lines stacked on top of each other is the button:
It's the menu toggle for small displays like smartphones. On big screen it will be hidden.
As an addition to the above answers.
In order for the button to have a working functionality, you need to load jquery library and right after it the bootstrap jquery library.
These can be included either in the head tag of your html code or just before the end of the body tag (2nd option is best practice).
Try it like this (cdn used):
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Related
The hamburger icon bar of the menu is not visible on the homepage and about page and it is there on the other pages. It actually works when I click blindly but it is invisible. I saw some answers around here and I tried to change the navbar-toggle color and background color to black but it didnt work. I also went to .navbar-default .navbar-toggle .icon-bar and nothing.
I would really appreciate some help, I'm fairy new and I dont know what else to do.
This is the html code:
<!-- Collapse Button Starts -->
<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>
<!-- Collapse Button Ends -->
So I'm working with this bootstrap nav bar. When resizing the width the window below about 767px or so it takes all the nav bar links and displays an expand button instead. Basically for mobile users. That is the correct behavior and what I'm expecting.
But when clicking on that new mobile expand button nothing happens. I want it to expand and show a menu with all the links that were removed in the nav bar. For example this page. When resizing the width of the window smaller it creates that button and it is clickable. That is what I'm trying to achieve.
I have created a codepen here. I have also listed a small snippet of my code below. But the codepen gives a better interactive example of what is going on. Any ideas what I'm doing wrong and why that expand button isn't clickable?
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" 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="#">My App</a>
</div>
data-target="#navigationbar"
should point to your navigation menu container.
So, in your case, it should be:
data-target="#bs-example-navbar-collapse-1"
You will need to load the jQuery library and Bootstrap JS library for the drop down menu to work on mobile screens.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Update: Here is the latest jsFiddle.
You'll likely need to resize the Result pane, or even break it out into its own window, in order to see it in all its glory.
As you can see, I have a 400x200 logo image that I have attempted to make responsive (via the .img-responsive class), however it continues to remain the same size (400x200) and is not resizing + nesting nicely into my header navbar.
Ideally the image should resize and fit inside the navbar right in line with the menu items (MUCH AMAZE, SUCH WOW, etc.).
I have a feeling that it has something to do with this part:
<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="http://placehold.it/400x200" class="img-responsive" height="220" /></a>
</div>
I'm not really sure what this "Toggle navigation" <button/> is doing (the one that comes right before my logo <img/>). Admittedly, I am cargo culting here and just got some generic Bootstrap 3 code off their examples site. Am I applying the wrong styling rules? Do I need to put the <img/> in a form or div or some other type of container here? Where am I going awry?
add this may help you
.img-responsive
{
width:100%;
}
So, I am a noob, working through using this template : http://startbootstrap.com/template-overviews/freelancer/
I am editing it, and trying to get some bells and whistles to work better. I want to put my logo into the header and have it be responsive, I cannot get other answers I've found here to work... I may be a bit thick, in fact that is probably the big issue.
What is the easiest way to place a responsive logo graphic into the bootstrap navbar?
This is the code I currently have.
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<img src="images/My_logo_navbar.png" class="img-responsive">
<div class="navbar-header page-scroll">
<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>
</div>
Please advise.
Add
<div class="navbar-brand navbar-brand-left"><img src="images/My_logo_navbar.png"></div>
after the </button>
In this way boostrap automatically position your logo on left top corner.
And crop your My_logo_navbar.png to size you want and use media queries to change it width or height on smaller devices. If you want you can use two of navbar-brand classes with separate id's. One for larger screens and one for smaller screens.
I always use this for my projects.
I took the vanilla Bootstrap3 Navbar Example: (http://getbootstrap.com/components/#navbar) and threw here: JSBin
The one edit I made was to move the
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
from the button.navbar-toggle to the div.navbar-header
The resulting div.navbar-header then looks like:
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<button type="button" class="navbar-toggle">
<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>
This has been working great on chrome/firefox, though I haven't tried any IE testing yet, but the desktop versions of it working don't really matter much, since the whole point is the navbar-header only gets shown on mobile devices. It works fine on my Android 4.4.2/Chrome 34.
The problem I'm running into, is only the anchor tag (a.navbar-brand), and the button (button.nav-bar-toggle) are actually clickable on iOS (I tested on iOS 6.1 and 7.1).
Is there a more clever/reliable way to make the entire div.navbar-header clickable?
Edit This appears to be an iOS bug, and a work-around was simply to add "cursor: pointer" to the div.navbar-header I have a full answer/example below.
I found a jQuery bug report that had the missing work-around for this iOS problem: http://bugs.jquery.com/ticket/5677
Adding the style="cursor:pointer" to the div.navbar-header fixes the onClick event issue.
The resulting code looks like:
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="cursor:pointer">
<button type="button" class="navbar-toggle">
<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>
Here's an updated JSBin: Working JSBin Example