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
Related
I am trying to use the Bootstrap class="icon-bar" but its not showing up on the screen.
The elements are present in the screen but default height and width is showing up 0.
I have been through multiple questions on Stack Overflow and different sites but no help.
Following is the code:
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top bg-light">
<div class="containter">
<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>
</div>
</nav>
</body>
Image:
Links that I have followed:
Bootstrap icon-bar span not visible
Bootstrap icon-bar not showing
Bootstap:span class icon bar not working
As answered in the comments by #Akhi, there is no span.icon-bar in Bootstrap 4.
Instead we need to use the class: <span class="navbar-toggler-icon"></span>
Doing so has resolved my problem.
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
Following this page to use image logo instead of text for navbar brand, I came across this problem that the portrait logo has been cut off by any content/ text/ image/ carousal that comes after it.
How can I fix it?
<!-- 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="#">
<img src="http://placehold.it/150x200&text=Logo" alt="">
</a>
</div>
Result:
Add a max-height to the img.
max-height: 100%;
height: 100%;
width: auto;
Try adding a z-index to your nav bar like so in your CSS file as it looks like your foreground image is overlapping it
.navbar-header {
z-index: 100;
}
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%;
}
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