I'm wondering how I can style Bootstraps nav bar to look something like this:
I'm using the standard Bootstrap navbar-inner class with little CSS styling. I want the colored rectangles inside the navbar without affecting navigation.
Would it be best to use CSS or images to accomplish the effect?
I would use a repeat-x background-image for the whole box which contains the pattern you've mentioned.
Something like this:
.navbar-inner {
background-image: url(image.png);
background-repeat: repeat-x;
background-position: top left;
padding-top: 10px; /*Height of the image*/
}
You can use an image like this:
I did it with css on this site - http://heritage.warwickshire.gov.uk/
#colophon {
background: rgb(0,106,85);
background: -moz-linear-gradient(left, rgba(248,153,0,1) 14%, rgba(181,0,0,1) 14%, rgba(181,0,0,1) 28%, rgba(10,9,24,1) 28%, rgba(10,9,24,1) 42%, rgba(0,179,0,1) 42%, rgba(0,179,0,1) 56%, rgba(210,0,144,1) 56%, rgba(210,0,144,1) 70%, rgba(229,86,0,1) 70%, rgba(229,86,0,1) 84%, rgba(0,128,238,1) 84%, rgba(0,128,238,1) 98%);
background: -webkit-gradient(linear, left top, right top, color-stop(14%,rgba(248,153,0,1)), color-stop(14%,rgba(181,0,0,1)), color-stop(28%,rgba(181,0,0,1)), color-stop(28%,rgba(10,9,24,1)), color-stop(42%,rgba(10,9,24,1)), color-stop(42%,rgba(0,179,0,1)), color-stop(56%,rgba(0,179,0,1)), color-stop(56%,rgba(210,0,144,1)), color-stop(70%,rgba(210,0,144,1)), color-stop(70%,rgba(229,86,0,1)), color-stop(84%,rgba(229,86,0,1)), color-stop(84%,rgba(0,128,238,1)), color-stop(98%,rgba(0,128,238,1)));
background: -webkit-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%);
background: -o-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%);
background: -ms-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%);
background: linear-gradient(to right, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%);
height: 0px;
padding-top: 0.5em;
}