Having some trouble achieving the style I would like for my responsive bootstrap navbar.
I'm pretty new to bootstrap/css and jsfiddle http://jsfiddle.net/YfmwV/ is what i've hacked together so far.
<div class="navbar">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home
</li>
<li>Showtime
</li>
<li>Motivation
</li>
<li>About
</li>
<li>Testimonials
</li>
<li>Gallery
</li>
<li>Merchandise
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
The problem is related to the following code which achieves what I am after in the large screen view however completely ruins the menu in responsive mode.
.navbar .nav>li {
width: 12.5%;
}
I am trying to get the navbar items to take up the whole space of the navbar as opposed to being aligned either left or right, the only way I could think to do this was to set the width to a percentage, this is not ideal.
If someone could point me in the right direction that'd be amazing.
You could use a #media query so that your width:12.5% is only applied for desktop mode..
CSS
#media (min-width: 979px) {
.navbar .nav>li {
width: 12.5%;
}
}
Demo: https://www.bootply.com/wauacskYQj
I'm not totally understanding what you mean, but for as far as I can understand, you want to have the hover and active effect to not have any padding/margin on either sides.
Navbar-inner has a padding left and right of 20px, if you set those on 0, the bar is taking the full width of your menu.
.navbar-inner {
padding-right: 0;
padding-left: 0;
}
Is this what you mean?
Related
Trying to use bootstrap to design a top navigation layout and I see that it defaults to left align. how do I get it to use full width of top?
Current
https://jsfiddle.net/v2notb5n/
<nav class="navbar">
<div class="fluid-container">
<ul class="nav navbar-nav navbar-inverse">
<li class="nav_page active"> Home </li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" class="nav_txt"> Team <span class="caret"></span></a></li>
<ul class="dropdown-menu">
<li>National</li>
<li>Geo</li>
<li>Team Pictures</li>
</ul>
<li> About us </li>
</ul>
</div>
</nav>
Expected result:
https://imgur.com/a/ZQDR0
I tried something similar I found here Bootstrap navbar justify / span menu items occupying full width
but that didn't work for me.
Updated based on suggestions and answer here: https://jsfiddle.net/uahwra75/1/
To have the navbar stretch the full width, simply overwrite the float: left on .navbar-nav for medium screen widths and higher, with:
#media screen and (min-width: 768px) {
.navbar-nav {
float: none;
}
}
I've created a working fiddle showcasing this here.
Also note that you have incorrectly used the class fluid-container instead of container-fluid, which will affect your padding. I've corrected that in the fiddle abopve, and the snippet below:
#media screen and (min-width: 768px) {
.navbar-nav {
float: none !important; /* StackSnippets require more specificity */
}
.navbar-nav li {
width: calc(100% / 3);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-inverse">
<li class="nav_page active">
Home
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>National</li>
<li>Geo</li>
<li>Team Pictures</li>
</ul>
</li>
<li>About us</li>
</ul>
</div>
</nav>
EDIT
To additionally ensure that the titles are centralised, you're looking to add a width to .navbar-nav li that is 100% divided by the number of columns. COnsidering you have three columns, you divide by three:
.navbar-nav li {
width: calc(100% / 3);
}
Note that like the removal of the float, this should go inside of the media query.
I've created a new fiddle showcasing this here.
Hope this helps! :)
I've been trying to get my site's navbar-brand text to be responsive: I want it to get smaller as the screen is resized. Right now, what happens is that my brand text won't change size on mobile. This creates an ugly stacking of the navbar links over the navbar-brand. I've tried putting
#media (max-width: 400px) {
.navbar-brand {
font-size: 14px;
}
}
in my CSS, but to no avail. Is there something simple that I'm missing?
Here's a screenshot, to show you what I mean:
Medium-sized screens
HTML:
<nav class="navbar navbar-inverse 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="index.html">Sample Company Law Group, Inc.</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>
Home
</li>
<li>
About
</li>
<li>
Attorneys
</li>
<li>
Practice Areas
</li>
<li>
References
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
https://jsfiddle.net/frzbpkjk/
First, I tested your css and it works. You can see an example working on this link:
http://codepen.io/eMineiro/pen/Kzjymp
<div class="navbar-brand">
<p>Test</p>
</div>
1) The problem could be on your css code. Check if you have another "font-size" that may be overloading your code.
2) The most easily way to see what is happening is to open you browser developer tools and check what style browser is calling when your media screen is less than 400px
Any example below could override your code:
/* Any media with max-width greater than 400px could override your code */
#media (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code */
#media (min-width: 200px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with max-width greater than 400px could override your code */
#media (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code and max-width greater than 400px */
#media (min-width: 200px) and (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}
Working with an angular and bootstrap navbar. When the screen is resized horizontally below 768px the search field at the right falls down to the line below. I am trying to keep it in the top line and just let the navbar overflow to the right.
Here's a plunker! http://plnkr.co/edit/krAGXP6JEVZpLFNvRlsw?p=preview
I am using Chrome 32 to test this widget.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://upload.wikimedia.org/wikipedia/commons/5/57/Umbrella_Corporation_logo.png" style="width: 31px;height:35px;"/>
</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Foo
</li>
<li>
Bar
</li>
<li>
Baz
</li>
<li>
Bop
</li>
</ul>
<div class="pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Why does this silly search field insist upon dropping down a line on smaller screens?
Corrected: The input-group-btn seemed to be the cause of the problems for me.
Adding this:
.navbar-form .input-group-btn {
display: block;
}
.navbar-form .input-group {
margin-right: 30px;
}
Ensured the search never jumped down.
Plunker here
Looks like it was a combination of a few items. First being the min-width width media query for a few items floating only when the screen size is above 767px. ( you could put these inside a max-width instead of leave them default, however you want to set it up )
.navbar-nav,
.navbar-nav > li,
.navbar-header {
float: left;
}
And then this little bugger's width within a min-width query throwing a wrench into the flow set on another media query
.input-group-btn {
width: 1%;
...
...
}
Again, I set a few items without the query, which you could stuff into a max-width query or just have them default.
http://jsfiddle.net/evanbriggs/9xtLtrr4/
Evan and mccannf helped me to identify that my width styles were being updated but their values weren't being accurately reflected within the chrome dev tools. Building from their recommendations I found that the following addition to my css was the best solution.
.pull-right .navbar-form .input-group .input-group-btn {
width: auto;
}
I am looking to make a layout page, which has a banner at the top, that handles the following:
Desktop - Maximized screen (Would have a center page used of 1024px limited)
Desktop - as soon as the size goes lower than 1024, the banner scaled down, to fit the width of the screen
Phone/Mobile - Banner uses full width
Below is a technically rendered diagram, using software which is beyond any of your imaginations, so I will not elaborate, but hopefully it get's the point across.
First box shows a screen with the browser maximized. Banner goes to 1024 max, as does the content of the screen below it.
Next image shoes a 1024 resolution screen. Screen uses full browser.
Last image down shows a screen, with the browser NOT maximized, and using less than 1024 pix. The banner resizes down (doesn't crop... resizes)
And the bottom right is a phone. No brand... just a phone. :)
Can you show how this can done? Can the image (an ?) be resized based on these requirements?
My attempt at the moment:
<div class="container">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<img class="item active img-responsive fullsize" src="/Content/images/1.jpg" />
<img class="item img-responsive fullsize" src="/Content/images/2.jpg" />
<img class="item img-responsive fullsize" src="/Content/images/3.jpg" />
</div>
</div>
<ul class="nav nav-pills navbar-inverse">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-list"></span> Our Friesians</li>
<li><span class="glyphicon glyphicon-picture"></span> Stock</li>
<li class="dropdown">
<span class="glyphicon glyphicon-info-sign"></span> Help <b class="caret"></b>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign"></span> About Us</li>
<li class="divider"></li>
<li class="dropdown-header">Contact Details</li>
<li><span class="glyphicon glyphicon-inbox"></span> Contact Us</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Directions</li>
</ul>
</li>
</ul>
<div class="container-fluid">
This is the Index page.
</div>
</div>
This is the simplest possible way to do it. You can just make the image max-width: 1200px, but that could be a problem down the line. I'm pretty sure this has been asked, and answered already. I'm too lazy to find it.
<html>
<head>
<style>
#mlp{
/*The next line controls the fit of the image.*/
max-width: 100%;
}
#container{
/*The next line controls the max of the container.
Change it to the value you want.*/
max-width: 1000px;
border: 1px solid black;
}
/*media query suggested as an alternative to the above.*/
#media(max-width: 480px) {
#mlp {
max-width: 100%;
}
#container {
max-width: 480px;
}
}
</style>
</head>
<body>
<div id="container">
<img id="mlp" src="http://img64.imageshack.us/img64/4163/01an1.jpg">
</div>
</body>
</html>
There are css media queries that would switch out the image with hiding instead, but it's more code. Media queries should be placed at the bottom to take precedence when they're needed.
I'm designing a website using Twitter's Bootstrap, and I'm having difficulty with the responsive navbar. In bootstrap, the navbar allows a mobile user to click an icon to extend the navbar and display navigation links. I'm unable to find how to adjust the maximum height... when I try and use one of the drop down bars, the navbar doesn't change size accordingly, and the user is unable to see any of the links.
Thanks for any help you can provide.
-A
EDIT: here's the code that I'm using for the navbar (html) the css that I'm using is the standard bootstrap.css and bootrstrap-responsive.css:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://example.com">organization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Contact</li>
<li>Now Playing</li>
<li class="dropdown">
Public Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li>Programs</li>
<li>Host an Event</li>
<li>Educational Initiatives</li>
</ul>
</li>
<li class="dropdown">
Undergraduate Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">Physics</li>
<li>Physics Homepage</li>
<li>Physics and Astronomy</li>
</ul>
</li>
<li>Volunteer</li>
<li>FAQ</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
The default navbar html code is the following:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
And if you inspect the navbar element you will find that the inside div (navbar-inner) has the class:
.navbar-inner {
min-height: 40px;
}
You can remove this value and find that the navbar remains the same height, that's normal, because the height of the navbar is set to "auto". Therefore if you remove the min-height the height will depend of the link tags padding, inside the <ul></ul>, and the <a class="brand"></a> padding as well.
.navbar .nav > li > a {
float: none;
**padding: 10px 15px 10px;**
color: #777;
text-decoration: none;
text-shadow: 0 1px 0 #FFF;
}
.navbar .brand {
display: block;
float: left;
**padding: 10px 20px 10px;**
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #777;
text-shadow: 0 1px 0 #FFF;
}
If you change it, you will find that the height of the "navbar" parent will automatically change. You can also maintain the min-height property and just change its value, adjusting the padding of the elements I've mentioned above.
For the responsive part, you can edit all the styles in the bootstrap-responsive.css, inside the specific media query for the resolution that you want to edit.
EDIT: Just saw your HTML, check the padding of your link tags inside the navbar, reduce it, change the .navbar-inner min-height too, and play with the values.
Ok, the way I fixed the first part (having a header that didn't resize when I wanted to) was by changing the min width value in the bootstrap-responsive.css like so:
#media (min-width: 1200px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
where 1200px was changed to 1200 from 980. Tricky tricky... for the record, it's on line 1104.