Top Nav Bar Customization

Mar 24, 2013 at 2:42 PM
Edited Mar 24, 2013 at 3:08 PM
I am looking to change the colors to the top navigation bar, something which is usually pretty straight forward.

In looking through through a dom inspector it doesn't seem quite as straight forward. There is a lot going on so I don't want to mess with the program, but is the only place to modify the top navigation bar in the min.css? It is difficult to look at when minified, and all teh "Filter: bits just make it that much more combersome so I figured I'd ask here first :)

More specifically I guess, is the only/best way to customize it to modify the following:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='CUSTOMCOLOR',endColorstr='CUSTOMCOLOR',GradientType=0)

in bootstrap.min.css?

Cheers,

Shane
Coordinator
Mar 25, 2013 at 12:52 AM
Hi Shane,

We attempted to apply as little additional branding as possibly so you will want to override additional elements such as the top (horizontal) nav bar in your own custom stylesheet. We used styles.css I believe.

In regards to the top nav bar, we took the standard top navigation snippet but included it within a Bootstrap "navbar". We then used the navbar-inverse to give it a black like background color. You probably found the following class then in the bootstrap.min.css file.

.navbar-inverse .navbar-inner {
background-color: #FFFFFF;
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border-color: #252525;
}

You can override this in the custom styles.css stylesheet, such as:

.navbar-inverse .navbar-inner {
background: #ccc none no-repeat;
}

This would provide a grey-ish background color.

As a side note, although we linked the master page to bootstrap.min.css, you could change this to bootstrap.css so that you can more easily search and find a particular style. My suggestion would be to never modify the bootstrap.css or bootstrap.min.css directly, always provide your own overrides in a seperate stylesheet in case you ever wish to use a newer version of bootstrap.

Eric
Apr 26, 2013 at 11:27 AM
Edited Apr 27, 2013 at 8:42 PM
Hey all!

First of all great project!

Secondly I would suggest that you guys use the .navbar and not the .navbar navbar-inverse. It has a cleaner look and keeps away the confusion for people when 'additional' styling is added:

(Don't mind the padding in the SideNavBox (added for Search Refinement Panel)) ;)

Image

Keep up the good work!

Bas Jacobs
Coordinator
Apr 28, 2013 at 1:44 AM
Edited Apr 28, 2013 at 9:34 PM
Hi Bas,

You make a good point. If you intend to brand the top navigation, you should remove .navbar-inverse from the div with id = topnavbar, from the Master Page. Then provide additional css based on .navbar.

original:
<div id="topnavbar" class="navbar navbar-inverse">
new:
<div id="topnavbar" class="navbar">
We originally choose to use navbar-inverse so as to point out this feature of Bootstrap so we are going to leave that in the Master Page. I went ahead an updated the bootstrap-custom.css though as the font and background colors that we provide for the nav are specific to navbar-inverse and they should be grouped as such.

These updates are found in Bootstrap for SharePoint 2010 Beta V 1.0.2 and Bootstrap for SharePoint 2013 Beta V 1.1.12.

Thanks for the suggestions.

Eric
Apr 29, 2013 at 7:35 AM
Clear. Thanks for the fast reply!
Jul 12, 2016 at 3:04 PM
Hi,

Thanks for the excellent project. I'm just having a bit of an experiment at the moment and struggling with something that's likely to be down to me more than anything.

I'm struggling to change the navbar at all. My custom CSS page is loading ok because other elements have loaded as expected, but I cannot seem to change this from the black bar at the moment.

I've tried all sorts of different combos of navbar, navbar-inverse, topnavbar and navbar-inner. I can't seem to get anywhere.

I'm looking to create something similar to Bas.

I'd be grateful for any help you can give me.

Thanks