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
Related
Beginner project - I'm working on something with Bootstrap and have mostly finished building my Navbar. When the Navbar goes into collapsed mode I like the dropdown menu a lot and I want to have it this way at all times.
I cant for the life of me figure out what is even making it change to begin with
The left one is how it looks when it is collapsed, and how I wish to have it at all times (notice how it automatically centers the dropdown here as well):
http://imgur.com/a/yFVaE
I found that if I tweaked the CSS so that the page is always in collapsed mode, the dropdown still has the 2 styles and changes where collapsed mode used to kick in
Apologies - beginner here, new to StackOver flow as well, hope this makes sense to someone :) cheers
<nav class="navbar-fixed-top 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 cornerlogo" href="/">
<img class="logo" alt="Brand" src="/img/Logo1.png">
</a>
<!--<p class="navbar-brand centerme">Current Client Name</p>-->
<ul class="nav navbar-nav navbar-default centerme">
<li class="dropdown">
Current Client Name <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right scrollable-menu">
<li class="newclient">New Client</li>
<li role="separator" class="divider"></li>
<li>client1</li>
<li>client2</li>
<li>client3</li>
</ul>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--******************php if statement here to check if client selected-->
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default">New SABR</button>
<button type="submit" class="btn btn-default">Edit Client</button>
<!--</form>-->
<!--<form class="navbar-form navbar-right">-->
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I dont know how to properly show my css, but not sure its relevant as even if i disable ALL CSS on the page the behavior is the same
I hope you all are fine. I am new here, and I have a question. I am working with mvc , with c#, html, css and boostrap.
I am trying to develop a responsive nav bar. It contains icons for each menu item. For example, home (a house icon with words under it), item 2, item 3 and so on.
when displaying the nav bar in movile devices ( small screens) the icons in the hamburguer menu continue to be displayed as big as used to be in the computer´s version.
I would like to adapt the icnons sizes(the brand logo and the items) in the nav bar for each screen size..here you are the code:
<nav 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="#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="brand">
<img class="img-responsive" src="http://Brandlogo.com/brandlogo.png alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#Url.Action("action1", "item1")">
<img class="img-responsive" src="/images/item1.png" alt="imagen"> item1
</a>
</li>
<li>
<a href="#cont-4">
<img class="img-responsive " src="/images/item2.png " alt="imagen">item2
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
thank you for your help
You should check out media queries
It enables you to change certain css styles based on screen size.
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 want to make a nav bar that automatically turns into a Menu button and collapses when you minimize your browser
I want it to be exactly like this one http://php1.emagid.net/~laurenbe/
I looked up tutorials but every tutorial only teaches us how to do the bar static to the top of the page. Any suggestions?
This is part of bootstrap, the Navbar
At it's most basic, you want to do this:
<nav class="navbar navbar-default" role="navigation">
<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">
<span class="sr-only">Toggle navigation</span>
<div class="btn btn-primary">Menu</div>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can then use custom CSS styles to over-ride bootstraps native styling.
It's all about responsive design, so you can have help here : http://getbootstrap.com/css/#grid.
Here : http://getbootstrap.com/css/
And a beginner video for bootstrap if you're not familiar with it : https://www.youtube.com/watch?v=no-Ntkc836w
So I am trying to change the color of the navbar. I have worked with HTML and CSS, but havent really made design changes before. And for some reason I cannot figure out for the life of me how to make changes to this html/css template I downloaded.
<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>
<a class="navbar-brand" href="index.php">CandyCode</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">
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I am not really sure what to change in the CSS. Essentially I would like to change the navbars color to #77bbb0. I can show more code, but I think for the sake of clarity, you can check out the code here: http://startbootstrap.com/blog-home.
Thank for helping a design noob!
The easiest way is to give the HTML element in question an id and then add the CSS rule:
#the_id_i_gave_it { background:#77bbb0; }
However, if you can't or don't want to edit the markup, you can chain together the various classes on the element to give your rule high specificity:
.navbar.navbar-inverse.navbar-fixed-top { background:#77bbb0; }
As long as those classes don't change that should be specific enough to get just the div you want and no others.