I'm creating a mobile site using bootstrap and i'm struggling to get the CSS correct.
I am trying to create 3 sections on the page.
Navigation - this will always be at the top, so when the page scrolls, the navbar is always visible. Im using the standard bootstrap navbar for this and appears to work well.
I next have a DIV which display a pretty line graph - i would like this to be the same as the nav bar - i.e. does not scroll away.
Next i have a DIV which contains a table, this needs to be scrollable.
So essentially the top half of the screen should just be static and the bottom half containing the grid should move. This is what i've done so far! but it doesn't seem correct.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
</nav>
<div style="padding-top:70px; z-index:100; height:430px; top:0; position:absolute; padding-right:2%">
A pretty line Graph
</div>
<div style="position:relative; height:100%; overflow-y:auto; overflow-x: hidden; padding-top:430px;">
My Table
Hopefully that makes sense.....
HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
Place your header items here
</nav>
<div class="page-header">
Place your chart here
</div>
<div class="container">
Place your table here
</div>
CSS:
body { padding-top: 70px; }
Related
I have basic HTML layout with Bootstrap navbar and an OpenLayers map.
JS Fiddle here.
HTML looks like this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Title</a>
</div>
</div>
</nav>
<div id="map" class="map"></div>
The problem is navbar because it pushes the map div down and i have to scroll down a bit to see the whole map. Can I somehow restrict the map to fit only the visible screen extents so i don't get any scrolling space (like in the picture below)?
Here is a good example of what i'm trying to acomplish:
http://jumpinjackie.github.io/bootstrap-viewer-template/2-column/index.html
Just add:
#map {
height: calc(100vh - 52px); /* 100% of the viewport height - navbar height */
}
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
I am trying to create pure non-responsive template using bootstrap,
example http://getbootstrap.com/examples/non-responsive/
above example is working great, but if i resize the browser window to small size then horizontal scroll bar is shown but when i move the scroll bar to right, it doesnt show the navbar contents at right side, the navbar doesnt scroll.
how do imake the navbar too scroll, so i can see the right side contents on the NavBar.
i have tried adding the
overflow:scroll;
.navbar-fixed-top but it adds scrollbar to the navbar .
As the nav is fixed extra links will be hidden so you can make the nav static
you will need to change the class from navbar-fixed-top to navbar-static-top
<nav class="navbar navbar-default navbar-fixed-top">
to
<nav class="navbar navbar-default navbar-static-top">
or you will need to write your own css to make the nav width 100%
I am trying to have a bar on the top of my site, its not a navigation bar. Various items will go on this bar. So I was thinking How can use Bootstrap for this purpose. There is a nav bar in Bootstrap but I used it already for the navigation of my bar. Can I also use it for different purposes?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
</div>
</nav>
Use navbar-static-top instead of navbar-fixed-top for your Bootstrap's Navigation bar.
Add <div id="normal-bar">My normal bar</div> before your Bootstrap's Navigation bar and you can customize it any way you want.
Bootstrap's Starter template - DEMO
HTML
<div id="normal-bar">My normal bar</div>
<div class="navbar navbar-inverse navbar-static-top">
......
</div>
CSS
body {
padding-top: 0px; /* It was 50px before */
}
#normal-bar {
/* Your CSS - It's only for DEMO */
background-color:#f00;
text-align:center;
padding:10px 0px;
font-size:20px;
}
You don't need to use nav. For additional bars and sections use this code:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p>Some text here or whatever you want</p>
</div>
</div>
</div>
Your nav has position:fixed and min-height:50px properties, so don't forget to add to your next section margin-top:50px so it's visible.
Yes, you can use two navigation bars to achieve this behavior by using two separate navbars with navbar-fixed-top and navbar-static-top. See this example on bootply.
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