Responsive Bootstrap Header

In this jsfiddle I have created an example on how to create a custom image header for medium and small devices.

http://jsfiddle.net/afarris/U87eb/15/embedded/result/

The key to this header is it only uses two images. The main logo and a simple 1px slice. Since the the logo is high resolution it can be scaled down depending on your media queries. This makes maintaining the header easy since you don’t have to deal with multiple size/files graphics.

The logo is 144×144. The important thing to realize is the ratio. This logo is a 1/1 ratio so scaling down is easy. As long as your graphic has high physical resolution, it will look good on your retina device.

bootstraplogo

bootstraplogoslice

The header will be 100px tall if between 479px and 991px. If under 479px it will be 50px tall.

A final item to mention is I adjusted the @grid-float-breakpoint from @screen-sm-min to @screen-md-min in http://getbootstrap.com/customize/. This is to allow the nav to collapse on medium devices.

grid-float-breakpoint


body {
padding-top: 50px;
}

.navbar-header {
background-image:url("bootstraplogo.png", "bootstraplogoslice1.png")
background-repeat:no-repeat, repeat-x;
background-position:center;

}

@media only screen and (min-width:479px) and (max-width:991px){
body {
padding-top: 100px;
}
.navbar-header {
background-size: auto 100px, 1px 100px;
}
.navbar-header {
height:100px;
}
}

@media only screen and (max-width: 479px) {
.navbar-header {
background-size: auto 50px, 1px 50px;
}

.navbar-header {
height:50px;
}
}

Posted in CSS, Design Patterns, Responsive Design, Twitter Bootstrap

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: