I have a page using boostrap layout.
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
//All menu stuff occuping all the width of the top.
</div>
//Jumbotron rendering body of views.
<div class="jumbotron">
#RenderBody()
</div>
</body>
The jumbotron CSS:
.jumbotron {
height: 100%;
padding-top: 80px;
padding: 40px;
margin-bottom: 0px;
font-size: 15px;
font-weight: 100;
line-height: 2.1428571435;
color: inherit;
}
I have a view with a telerik grid, and when it is displayed on the screen it fits behind the Menu. Becouse the jumbotron is taking 100% i think. So, how can i fit the jumbotron below the menu, separating them?
Remove the navbar-fixed class from your nav like so:
<div class="navbar navbar-default" role="navigation">
If you want a fixed navbar, add a padding top: 30px (equal to the height of your navbar) to body
body {
padding: 30px 0 0;
}
Related
I'm using a centered navbar-brand in Bootstrap 3, and when viewed on a phone sized screen, the text wraps, but the top line has a leading space, whereas the bottom does not, leading to their being misaligned.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" id="title-card">Testing Testing</a>
</div>
</div>
</nav>
In this example, "title-card" sets the font-size to 2em; and navbar-brand along with navbar-header were modified to be:
.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
.navbar-brand {
float: none;
}
This produces the following output:
How would one go about aligning them?
Give a margin:0 and padding:0 to your #title-card.
#title-card {
margin: 0;
padding: 0;
}
I'd like to fill the content div to the space in the middle of header and footer.
Currently header and footer are styled using `bootstrap:
header:
<nav id="header" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
...
</div>
</nav>
footer:
<nav id="footer" class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
test footer
</div>
</nav>
content:
<div id="content" class="panel panel-default">
...
</div>
css code for the content div is
.content{
position: absolute;
top: 50px;
left: 0px;
right: 0px;
bottom: 50px;
overflow-y: auto;
}
It works well if the header/footer heights are fixed at 50px. Any idea to do once the header/footer heights are changing due to different screen sizes.
You could use media queries and define the div height for every screen size your header/footer has a different height in.
https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries
Maybe you could share a jsfiddle with your code?
If your header and footer remains at 50px height in all devices you could do something like below:
.content{
width: 100%;
height: calc(100% - 100px);
position: absolute;
left: 0;
top: 50px;
overflow-y: auto;
}
I have a layout using a fixed navbar and sticky footer. In the main body, I have a fluid container with a column aligned to the left. I want that column to vertically fill the main body (between the navbar and footer), however I can't get it to work. I've tried all the examples I can find, to no avail.
I've build this JSFiddle to show what I have so far.
This is what I'm hoping to achieve:
My HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 ">
<div class="main-content">
<h1>Hello world.</h1>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
Sticky footer based on Boostrap example.
</div>
</footer>
And my CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #999999;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container-fluid {
padding-top: 50px;
}
.container-fluid .col-sm-6 {
padding: 0;
}
.navbar {
margin-bottom: 0;
}
.footer {
padding: 15px 0;
}
.main-content {
background: #efefef;
padding: 20px;
height: 100%;
min-height: 100%;
}
You can use height:calc(100vh - 110px); on the .main-content div. The 110px is the height of the footer + height of the header which is subtracted from the viewport height.
http://www.bootply.com/v8XITHB4fP
I have a fixed header with three tabs. On the rest of the page I have both text and images. I was able to have text scroll "under" the fixed header but the images overlap. I tried setting the background of the header as an image but that did not work. I also tried various z-index values but also lacked results. I'm posting the CSS with no z-index on the header because it doesn't affect the fixed header in terms of the overlap problem, but only shifts it off-center. Is there a way to fix this with CSS?
Thanks
HTML Code:
<div class="header">
<div class="container">
<ul class="pull-right nav nav-pills">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<p>text here</p>
<img src="image.jpg"/>
<p>more text</p>
</div>
</div>
CSS code:
body {
width: 100%
margin: auto;
background-color: #f7f7f7;
}
.header {
background: #FFFFFF;
position: fixed;
top: 0;
width: 100%
}
.toolbar a {
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.toolbar li{
display: inline;
}
.content {
margin-top:100px;
z-index:10;
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--Tabs Here-->
</div>
</div>
You have to use a Bootstrap feature (navbar) as opposed making the div a fixed element at the top of the page.
Using Bootstrap for a responsively designed web-app, I am looking to replicate the typical mobile-app layout:
Fixed Navbar + Overflowing Body + Fixed Footer
Check out the Smartphone preview (right-side icon) of: http://www.bootply.com/124373
I have the following CSS, which is close, but the fixed footer cuts-off the body - instead of the body scrolling:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: -60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px 0;
}
.boxes {
margin-bottom: 22px;
}
.middle {
margin-top: 4%;
overflow: auto;
}
And here's the HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mobile App Format Replication</a>
</div>
</div>
</div>
<!-- Begin page content -->
<div class="container middle">
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
...
<div class="row boxes">
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
<div class="col-xs-6 col-md-6"><img src="http://placehold.it/125"></div>
</div>
</div>
<!-- Fixed Footer -->
<div id="footer">
<div class="container">
<p class="text-muted">Fixed Footer Content</p>
</div>
</div>
What about using position: fixed on the footer element, and removing the negative margin on the body (instead, use 60px bottom padding instead):
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
body > .container {
padding: 60px 15px;
}
See fork here: Bootply
If you are trying to replicate the mobile app layout, you should try Ratchet:
http://goratchet.com/
And here are some of the examples: http://goratchet.com/examples/
You can use "Tab bar" to have a fixed footer on there. Hope this helps
Just add .bar-nav~.content{padding-top: 44px;padding-bottom: 44px;} in your styles.
It's completely done!