CODEWITHSUNDEEP
csstwitter-bootstrapstylingnavbar
Cole Roberts
Cole Roberts

Reputation: 984

Adding custom styles to bootstrap navbar

I'm wondering how I can style Bootstraps nav bar to look something like this:

enter image description here

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?

Upvotes: 0

Views: 3228

Answers (2)

Tom Rudge
Tom Rudge

Reputation: 3272

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;
            }

Upvotes: 0

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

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:

Background image

Upvotes: 2

Related Questions