bootstrap navbar how to give it a max width - html

I can't get this to work.
I've got a nav bar
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="pull-right">
<button class="btn btn-small btn-primary">Nieuwe medewerker</button>
</div>
</div>
</div>
</div>
Now this is a nice bar width the width of the container, it's centered in the middle, exactly how I want it.
Now I want this exact bar to be fixed to bottom, however when I add navbar-fixed-bottom, it automatically stretches to my window size.
<div class="navbar navbar-fixed-bottom">
I've been trying to adjust the css but can't get it to work. Someone has a idea of how to do this.
thanks

The navbar-fixed-bottom uses position:fixed so it's removed from the flow of the page and no longer takes the width of it's container.
You could instead make another class (ie; navbar-bottom) and use position absolute to place it on the bottom...
.navbar-bottom {
position:absolute;
bottom:0;
width:90%;
margin-bottom:0;
}
Demo: http://www.bootply.com/126172

Related

Bootstrap: navbar row with display:table not working with width:100% & vertical-align:middle

See this Fiddle: https://jsfiddle.net/5aw2w9w6/
The code is like this:
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:#FF0000">
<div class="container">
<div class="row" style="width:100%;display:table; table-layout:fixed; vertical-align:middle">
<div class="col-xs-5 col-sm-2"style="display:table-cell; vertical-align:middle">
<!-- content -->
</div>
<div class="col-xs-2 col-sm-8" style="display:table-cell; vertical-align:middle">
<!-- content -->
</div>
<div class="col-xs-5 col-sm-2"style="display:table-cell; vertical-align:middle;text-align:right">
<!-- content -->
</div>
</div>
</div>
</nav>
2 things are broken:
1) The width:100% on the row is not working. If you do an inspect element in the fiddle, you'll see that the navbar and container stretch the full width of the screen, but the row does not. This is also made evident in that the last col-xs-* has a text-align:right. As you can see in the fiddle, there's still a gap between the cart button and the right edge of the screen
2) The vertical-align:middle is not working. If it were, I'd expect the cart button to not touch the top edge of the screen, and instead be aligned middle (vertically) relative to the logo image (white, it's the content in the first section)
The check your container it has a max-width of width: 750px; that's why it doesn't touch the edges of the screen
For the vertical align middle please set height to your table row and the other reason why ain't work is because the
float:left of every column try to remove it and see it will work fine.
https://jsfiddle.net/nzjqua4s/1/

Using an empty <div> to fill up menu bar space

In this website, top side of the picture is consumed by the black menu bar. I would like to place an empty <div> to push the picture downwards. <div> height needs to be resized automatically to prevent blank space from appearing in different resolutions.
I tried adding empty <div>s, using vmin/vmax, didn't work.
JSFiddle link
menu bar
<header id="header">
<div class="top-bar">
<div class="container">
<div class="row">
</div>
</div><!--/.container-->
</div><!--/.top-bar-->
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse navbar-right">
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
The image is used as 'background-image' on a div with a fixed size. Some advantages are loading time and that the image can not be selected or dragged. A disadvantages the inflexibility. It's not that the black bar overlaps the image, as you can see when inspecting the element, but it's the div itself that cuts off part of the image. The best thing you can do is only use header images that exactly fit the container or you can play with the CSS background-size. Have a look at cover, but know that cover does not work in older browsers.

Overflow: hidden conundrum on mobile devices

I have 2 bootstrap navbars immediately followed by 2 horizontally centered dropdown menus as follows...
<div class="bodyWrapper">
<!-- top navbar - doesn't change size-->
<div class="navbar navbar-fixed-top navbar-inverse nav-top">
...
</div>
<!-- bottom navbar - collapses and changes size-->
<nav class="navbar navbar-inverse navbar-static-top" >
...
</nav>
<!-- 2 dropdown menus, always centered, and underneath the navbars-->
<div style="width: 100%;">
<div style="position: relative; left: 50%; top: -20px;">
<nav id="menu" class="menu">
</nav>
<nav id="menu2" class="menu">
</nav>
</div>
</div>
</div>
With just this setup, a horizontal scroll bar appears on mobile devices allowing the user to scroll across to nothing but blank space, other than my top navbar (which for some reason continues to fill the whole screen). I don't know why this happens but to solve it, I can add this CSS...
.bodyWrapper {
position : relative;
overflow : hidden;
}
(I experimented first applying overflow/overflow-x:hidden properties to body/html but it didn't remove the scroll bar on my iPhone).
But the problem with this option is that since the dropdown menus are now inside a wrapper with overflow:hidden, when the user tries to expand them they're cut off.
The only solution I can come up with, it to take the dropdown menus outside of the bodyWrapper div and use absolute positioning on them - but this is a pretty bad option since I'd constantly have to readjust their positioning because the height of the navbars above them can grow.
Anyway, all that's a long way of asking whether anyone can see a better way to deal with this mobile-specific (at least iPhones) issue. Thanks for any thoughts at all!
EDIT
example as requested:
http://codepen.io/d3wannabe/pen/gaVXzO
(the last line of the css can be commented in/out to see what happens to the dropdown)
You can set display of dropdown class to inline-block and its parent to have text-align to center.
.dropdown{
display:inline-block;
}
Check out here : http://codepen.io/anon/pen/aveEoP

CSS calculated width adds margin

I am stumped. I am using Bootstrap 3 static nav bar with a logo. I don't like how the responsive image works, so I would just like to calculate the size of the logo (image) to be 100% - 200px (width of hamburger toggle). I'm doing this so that the logo and hamburger can stay on the same "line" and don't increase the height of the navbar.
Here is my code snippet.
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsable-nav">
Menu <i class="fa fa-2x fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo.png"/>
</a>
</div>
....
</div>
In my CSS, if I add
.navbar-brand img{
width:calc(100% - 200px);
height: auto;
}
and then using Chrome Developer Tools, I see extra margin on the right.
But there is no extra (right) margin defined in the css.
Now, if i manually change the width in chrome dev tools to the calculated width (in this example it is 310px) -- then it works correctly.
It seems like when I am using the calculated width, it adds a right margin, which causes the logo and hamburger to break to different lines. I have reviewed my CSS in Chrome Dev Tools and diff'd the two examples -- but can't find differences.
Any guidance as to WHY this is happening and how to fix it would be appreciated. Let me know if you need more code snippets.
Please try to use float option.
i.e:
Use "pull-left" class in "navbar-brand" and specify the width
.navbar-brand {
width: calc(100% - 20px);
}
.navbar-brand img{
width: 100%;
height: auto
}
This may help you.
You should try wrapping the entire nav element in "container-fluid" as the javascript for bootstrap, and the styles within bootstrap are likely stepping in between your nav elements, and adding "container-fluid" or (full size responsive container" to JUST your nav-header elements.
So begin by changing:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
To:
<div class="container-fluid"> <!--Move this around entire nav element oor eliminate entirely-->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-header">
It is not an actual margin. When block elements does not extend to full width, dev tools shows the excess space as margin to show the layout.
In your case, please check if any value for display is inherited for this element.
Adding float will remove this highlight.
The problem was with the width of the navbar-brand element. I changed the width of that to
width:calc(100% - 200px);
and then set the width of the logo to
width: calc(100% - 10px);
and that gave me the desired effect and I don't have the navbar-brand logo with a line break.
use the below code to solve the above div width problem. if it is displaying different in different browser then write for Moz -moz-box-sizing:border-box,
Webkit -webkit-box-sizing:border-box;
box-sizing:border-box;

map and fixed side bar with bootstrap

I'm using bootstrap to do a simple version of something like this: http://techlist.in/
Basically, I want to have a map and a right side bar with a fixed size and fixed position.
I've started with something like:
HTML:
...
<div class="container">
<div class="span10">
<div id="map_canvas">
</div>
</div>
<div class="span2" style="position:fixed; right:0">
Some stuff
</div>
</div>
...
CSS:
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:40px; /* used for the top navigation bar */
}
But this is not working as expected, as the map remains 100% width and the "some stuff" label appears on top of the map. Any hints?
UPDATE
In fact, I already have the nav-bar, but I did not detailed it in the code, my bad. So basically the whole structure of the html page is (with the missing row div added):
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span10">
<div id="map_canvas">
</div>
</div>
<div class="span2" style="position:fixed; right:0">
Some stuff
</div>
</div>
</div>
<!-- include javascript stuff -->
...
</body>
The css file is:
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
height: 90%
width: 80%;
left:0;
right:0;
margin-top:40px;
margin-right:200px;/* used for the top navigation bar */
background: #ccc;
}
If a leave 200px of right margin for the map, how can I fill the margin with the sidebar ?
Basically, I need a side bar of 200px width and the map adapting accordingly on screen resizing.
UPDATE 3
I'm wondering if I really need to use container / row to achieve this layout in fact (I still do not manage to have this working as expected). As I only need to have a map and a sidebar (that should always remain on the right of the map even if the window is resized), would it make some sense to use basic div / css and not bootstrap classes ?
This is basically what I needed: http://jsfiddle.net/kuXYq/4/
have a look at this fiddle I made it might help.
http://jsfiddle.net/eKQGD/
I used percentages to keep things the same
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
height: 90%
width: 80%;
left:0;
right:0;
margin-top:40px;
margin-right:150px;/* used for the top navigation bar */
background: #ccc;
}
There are a few parts to the answer to this question.
The first thing to point out is that it's a little hazy as to why there is the requirement of a "fixed size and position", and by that I mean that the terminology being used may be throwing off your thinking a bit. Typically, you only need to use the "fixed" css position property if you plan on the page having scroll bars and you want the element to stay in the same position on the page no matter what. In this case, it doesn't seem like you want page scrolling at all since the map will appear to be the same size as the entire page. It seems like what you really want on the sidebar is for it to be a fixed height (aka the height of the browser window) with overflow set to scroll.
Secondly, it appears that you're missing a <div class="row"></div> tag around your elements - a tag with a "row" class is necessary to make the bootstrap "span" classes work.
Lastly, here is something that I would go with if I was trying to duplicate the link you posted, using a bit of JS love as well: http://jsfiddle.net/kzBkA/5/ (background colors added just to show what it looks like )
HTML:
<div class="container">
<div class="row">
<div class="span10">
<div id="nav_bar">
Nav bar goes here
</div>
<div id="map_canvas">
test
</div>
</div>
<div class="span2">
<div id="sidebar">
Some stuff
</div>
</div>
</div>
</div>
css:
#nav_bar {
height:40px;
background-color:blue;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
js:
$(function(){
$("#map_canvas").height($(window).height() - 40);
$("#sidebar").height($(window).height());
});
UPDATE:
So - again, first off, I encourage you to reconsider your use of fixed elements. You seem to be trying to build a page that won't scroll, but then using a "positioning" feature that's specifically for scrolling (position:fixed), which basically tells all your nice bootstrap code to be ignored and just put it where you tell it. A much nicer way to do this would be to use Bootstrap to your advantage. I changed the row class to row-fluid, I moved your nav bar into the span10 with the map (since that's how wide you actually want the nav, or at least that's how it was in the example), I removed the "navbar-fixed-top" class since you don't actually need things to be fixed, and removed the fixed positioning from the sidebar (since again that's basically making it ignore what you're trying to do). Check out the updated jsfiddle: http://jsfiddle.net/kzBkA/7/ - you may have to tinker with the JS to get the map_canvas div set with the correct height, but otherwise this should take care of making your page fluid when the browser is resized without having to add a ton of unnecessary CSS rules. In general, if you use a scaffolding framework, you should use it to your advantage to avoid creating cluttered, messy css with lots of "width:80%; height:20%; margin: ..." - the whole point of using the framework and scaffolding was to avoid that kind of code :)
HTML:
<div class="container">
<div class="row-fluid">
<div class="span10">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
navbar
</div>
</div>
<div id="map_canvas">
map goes here
</div>
</div>
<div class="span2" id="sidebar">
Some stuff
</div>
</div>
</div>
CSS:
.container{
max-width:100%;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
JS:
$(function(){
$("#map_canvas").height($(window).height() - 40);
$("#sidebar").height($(window).height());
});
UPDATE 2
Just realized I missed the part about the sidebar always being 200px but the map width being fluid. I've updated the fiddle to reflect that as well as updating so that sizes get reset when window is resized - http://jsfiddle.net/kzBkA/9/
HTML:
<div class="container">
<div class="row-fluid">
<div class="span10 left-col">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
navbar
</div>
</div>
<div id="map_canvas">
map goes here
</div>
</div>
<div class="span2 right-col" id="sidebar">
Some stuff
</div>
</div>
</div>
CSS:
.container{
max-width:100%;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
.right-col{
width:200px;
}
JS:
$(function(){
resizeElements();
window.onresize = function(event) {
resizeElements();
}
});
function resizeElements(){
//set height
$("#map_canvas").height($(document).height() - $(".navbar").outerHeight() - 20 /*not sure where this is coming from, possibly the scrollbar?*/);
$("#sidebar").height($(document).height());
//set width of left col
$(".left-col").width($(document).width() - $(".right-col").outerWidth() - 20 /*not sure where this is coming from, possibly the scrollbar?*/)
}