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%;
}
Related
I have a bootstrap project and I want to quickly change the span. So I have a span like that with my inline css:
<div 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="#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>
<span style="color:#fff !important;padding-top:10px !important;font-size:26px !important;font-weight:bold !important; display: block">Title</span>
</div>
</div>
</div>
But the thing is that style is not getting applied, however I can see the styles using dev tools:
Moreover then if I disable/enable any tickbox like that:
Then all styles gets applied.
Any ideas is what is going on and how to fix that?
when I tried it, everything is working except padding-top. To apply padding-top, use
display: block
or
display: inline-block
Edit:
Not sure if you know this already but span is an inline element which means, margin and padding will not take effect. Hence, you need to explicitly add display:block or inline-block
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>
NOTE
I am using bootstrap so when a user is using a mobile device the button element's CSS is overwritten with a media query of display:none, so that it doesn't interfere with my image being centered.
I'm trying to center my image that's within div tag. However this seems to be a little tricky. When I use text-align:center;, it doesn't seem to do anything and neither does margin:0 auto;.
HTML Mark-Up:
<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>
<a class="navbar-brand page-scroll" href="#page-top"><img id="header-logo" src="assets/img/logo.png"></a>
</div>
Does anyone have any idea why it won't center within the div element?
The best you can do is to center the a tag that wraps your img:
a.navbar-brand {
text-align:center;
display:block;
}
<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>
<a class="navbar-brand page-scroll" href="#page-top"><img id="header-logo" src="assets/img/logo.png"></a>
</div>
Although it isn't compliant to HTML5, it is supported by almost all browsers (i never found one that didn't support it):
<center>I am perfectly centered!</center>
The center tag. Anything inside this will be centered, img's, div's, anything.
The center tag is deprecated but is still widely supported.
Put a <center></center> around your <a></a> and you should be fine.
The center tag is 'ancient', so consider other answers first
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>
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