Okay, so I'm making a website using Bootstrap 3 framework, and I have an issue.
When I put an image (regular one, with an img tag) it has white space (left and right) across the screen. http://prntscr.com/9wuek5 - you can see that here, it even goes under my navbar. What I want to do is somehow get rid of that white space, and move picture to the center (horizontally and vertically). Here is my code so far:
<nav id="mainNavbar" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#colaps">
<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="#">ivke11080</a>
</div>
<div class="collapse navbar-collapse" id="colaps">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#">Home</a></li>
<li><a class="page-scroll" href="#">Projects</a></li>
<li><a class="page-scroll" href="#portfolio">About</a></li>
</ul>
</div>
</div>
</nav>
<img src="img/chase.jpg"/>
I tried to put border around image so i can see if it applies to the white space, but it's not, it's just around image as it should be.
You can absolutely position your image by using the following styles:
img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, 50%);
}
See this fiddle
Related
I have a website running with Bootstrap. I'm trying to get an image to match its container's height (it's huge right now). I've seen make an image fit its container by setting the image height to the containers height but it's not working. My best guess as to why is because it's inside a link:
<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>
<!--<a class="navbar-brand" href="/">K7DXS</a>-->
Here's the image:
<a class-"navbar-brand" class="k7dxslogo" href="/"><img src="/k7dxsblink.gif" class="k7dxslogo" alt="K7DXS" /></a>
The rest of the code:
</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>Linux</li>
<li>Ham Radio</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Partner Sites</li>
<li>External Links</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My relevant style.css:
.k7dxslogo {
height: 100%;
}
Why isn't it working, and how do I fix it?
EDIT: To be clear, I do NOT want to set a definite height for anything. To do so would make it so that the site is not responsive.
Add "img-responsive" class to your HTML img tag.
Set a defined height for navbar-brand
I'm creating template using Bootstrap v3.3.6.
Here's the part of my template:
As you can see I have navbar fixed at the top and I also have menu items that are icons or simply images embedded between <li></li> tags, user info icon and gear icon.
What I don't know for sure is if I'm doing it correctly, I mean is there a special class in bootstrap that is specifically for menu items where you want to insert image. Maybe those images are not supposed to be there.
Another question would be if I should place my logo image inside <a class="navbar-brand"></a>? If I try to insert bigger logo image in height than navbar height then logo image isn't properly centered. What is the easiest way to properly change navbar height and how to center images vertically in navbar?
(Maybe that's too much code, but I wanna make sure that my question isn't lacking anything) only part where two images are inserted as navigation items are relevant
<nav class="navbar navbar-default navbar-fixed-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="#">Workout.lt</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>
Vardenis Pavardenis
</li>
<li>
<img src="images/user-info.png">
</li>
<li>
<img src="images/user-gear.png">
</li>
<li>
Services
</li>
<li>
Atsijungti
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
To answer the second question, I put the image in the navbar-brand anchor and then use the inspector to adjust how the navbar looks. I copy that CSS into a separate document that overrides the default Bootstrap CSS.
<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="../path/picture.jpg" alt="picture" height="90" width="180" /></a>
</div>
Your CSS would look something like this:
.nav-bar-brand {
height:90px;
width:100%; /*or whatever width you wanted*/
}
Again, using the inspector is always quicker than experimenting and then uploading the CSS document.
I'm working on building a website with bootstrap, and I have a navbar fixed to the top of the window. I'm trying to make the abbreviated logo (BLM) on the left of the bar transparent through the letters and the navbar (so that whatever is on the page can be seen through the letters).
Anyone know what css (or html) needs to be added to do this?
Below is my navbar code:
<!-- Fixed navbar -->
<div 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-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="#">BLM</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
The Team <span class="caret"></span></li>
<ul class="dropdown-menu" role="menu">
<li>PersonA</li>
<li>PersonB</li>
<li>PersonC</li>
<li>PersonD</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
The part I'm talking about making transparent through to the page is
<a class="navbar-brand" href="#">BLM</a>
I can use CSS to make the navbar-brand transparent, but then it's just black because the navbar is black (and I don't want the navbar to be transparent).
In this example, I want to be able to see the red wall through the BLM letters
Thanks for any help/thoughts!!
Unfortunately, there is no CSS feature (yet) that does what you want it to do while being cross-browser compatible. However, the solution to your problem is easy.
Replace your logo with a .png with transparent letters and a semi-transparent background that matches the rest of the navbar. Shuffle around your divs so that your logo and the rest of the navbar are separate elements, and you're done!
Try opacity and a value of a decimal.
.navbar-brand {
opacity: 0.5;
}
I want to build a bootstrap 3 navbar like the facebook app, with some icons.
The problem is that when the bar its collapsed, all the icons are hidden. If I put the icons outside from <div class="collapse navbar-collapse"> the icons are out and not hidden, but the <ul><li> doen't work and put my icons vertically.
If its possible I want also to align the icons in the center:
Thats all! Thanks friends ;)
EDIT1:
HTML Code
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<span class="glyphicon glyphicon-comment"></span>
<span class="glyphicon glyphicon-edit"></span>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</div>
CSS Code
.navbar-header .navbar-icon {
line-height:50px;
height:50px;
}
.navbar-header a.navbar-icon {
padding:0 10px;
float:left;
}
JSBin Example
This example is working now. I need to know hw can I align in the center the icons in the mobile responsive version.
In the mobile version, wrap your icons in a div with style text-align:center and remove the float left of your icons.
When I click on the toggle on my mobile page, the menu pops up for a brief moment and disappears again. Only the first item remains visible.
I took the css from thebootstrapthemes and basically just changed the colors and the content of the menu.
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="top-nav">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#home"><img src="#"></a>
<button type="button" class="navbar-toggle collapsed" 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>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">Home</li>
<li>Pronunciation</li>
<li>Downloads</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Any advice, how I can get my menu back?
This is my site
.navbar-nav {
margin-right: 0px !important;
height: 51px;
}
The 51px height is limiting your collapsible nav to show entirely.
** Not related to your question **
When using Bootstrap don't use row outside a container div since it will cause unnecessary horizontal scrollbars to appear.
Check your HTML for this element: #home #banner .centered .row. It's showing a scrollbar on my browser.