Branding BlueBand.master Part 2: Navigation bar

In this part 2 I’ll take a look at how to customize the Navigation Bar in the BlueBand.master masterpage. The out-of-the-box Navigation bar isn’t too bar looking, but the color may not suit your design needs or wants. Let’s see how we can change that.

If you read part 1 of this series, you’ll know that the Navigation Bar is located in the third <tr> tag inside the masterContent <table> tag. This is important if you want to experiment with FireBug (which I highly recommend you do). Enough talk! On to the customization.

.topNavContainer

This is a <tr> tag that contains the Navigation Bar. If you want to change the color or style this is your starting point. The default bar uses a background image with a gradient effect but you can change this to just a solid background color if you’d like. Otherwise, just change the background-image property to point to your own background image.

You can also change the height property here, if you want to change the height of the Navigation bar. Please note however that if you wish to make it smaller you need to change an additional two elements (‘.topNavItem a’ and ‘.search’) for it to take effect. Also, if you wish to make it larger you need to adjust the padding for the text and the searchbox margins.

.topNav

This is a <table> tag that contains all the items (buttons or links) of the navigation bar. If you want the items to have a different background from the rest of the bar, you can set a background color or image here.

As we can see it’s not actually used for anything in BlueBand.master, since the links look no different than the rest of the toolbar. If you want, you can do something fancy like this:

This will move the links over to the right side, next to the search bar, and make the background white. Notice how the rest of the Navigation Bar keeps it’s gradient background however.

.topNavItem

This is a <table> tag for each induvidual item (button/link). Using this guy you can customize the text font, size and color to suit your needs.

You may also notice the image background that’s aligned to ‘right top’ and no repeat. This is the “splitter” between each item. You can remove this and use a border-right (or left) as well if you want.

This example will give you a dotted grey border on the right hand side of each item, with white verdana text in size 12pt.

.topNavItem a

This is an <a> tag that allows you to pad the text inside each item. This is especially important if you have made changes to the height of the Navigation Bar.

The top padding decides how far from the top the text will appear (so if you want to move it up or down, change this one). The sides will decide the width of the padding on the sides of the text. The bottom paddnig is set to 0px, and you should leave this one at that. If you change it, it may mess with the height of your Navigation Bar.

You can also set the left and right sides to have different paddings, to offset your text inside the element to either side (left or right align it).

This is also one of the three elements you have to change a property to allow you to make the Navigation Bar shorter. More on this later.

.topNavSelected a

This <a> tag is actually the same tag as for .tagNavItem, however when an item in the menu is selected (viewed) that is also applied with the style we specify here.

I usually like to keep my hover items and selected items the same, for consistency, but you can go ahead and change this if you want.

.topNavHover a

This targets the same <a> tag as the previous two styles when the user hovers over a menu item.

Like I mentioned before, I prefer to keep hovered state and selected state the same. If that’s the case, I suggest you group them together like this:

That way you only have to change one block of css code if you need to make changes.

.topNavFlyOuts

This <div> tag allows you to set the border color and width of the topmost part of the drop down lists.

Why is the border of the drop down lists in their own <div> tag? I’ll explain when looking at the next element.

.topNavFlyOutsItem

This <table> tag contains the entire drop down list that is displayed when a user hovers over a menu selection with a submenu available.

You can change a boatload of properties here, most notably background color, border colors and text appearances. Knock yourself out experimenting with changes to these properties.

Now I mentioned before that the top border of the drop down lists has to be set in .topNavFlyOuts. Why is that? Well, the way it’s arranged is that .topNavFlyOutsItem is actually one <table> tag for each item in the list (good thing we love tables, huh..?). Because of this, as you can see in the above example, only the bottom and left/right borders are specified. If you set the top border as well on each item, the border will appear double the size between items but not on the edges. Give it a try:

And there you go. That’s why we have .topNavFlyOuts controlling the top border.

.topNavFlyOutsItem a

This <a> tag controls the padding of the text for each item in the drop down list. You can use this to make your text closer or further away from the borders of your menu.

.topNavFlyOutsHover

This targets the same <table> tag that the topNavFlyOutsItem when the user hovers over an item in the drop down menu. This allows you to do some simple changes like background and text color.

You can also do more unconventional things like changing the font family or size, and aligning text to the right or center instead of left:

.search

This is a <div> tag that contains the “Search” text, the input field and the search button. It’s purpose in life is to set the location of the search input so that it looks good on the Navigation Bar.

If you change your Navigation Bar height, you’re going to have to change these margins for the search to look proper. Also, if you’re trying to make your Navigation Bar smaller in height, you’ll have to change the padding here to allow the Navigation Bar to shrink. This is the third and last property you have to change (the others are in ‘.topNavItem a’ and ‘.topNavContainer’).

You can also be a little fancy here if you want, and apply a background image. Let’s say you want your Navigation Bar to fade into a different color or shade at the right where it ends, you can make a separate image and load it as a background to this <div>. You’ll have to do some changing around then however:

That’ll give you a fade effect behind your search box.

.search .ms-sbcell .ms-sbplain

This targets the <input> where the user can input text to search for.

You can customize this in a variety of ways, including borders, fonts, background colors, padding, etc. Here’s a quick example:

.search .ms-sbcell

This targets the <td> tag which holds the “Search” text. So if you need to change that text, this is where you go.

.search .ms-sbgo

This is a <td> tag that contains the search button. If you need to change the background of the search button, you can do so here.

I’ll cover how to actually change the search button in a different article since it can’t be done with CSS.

Conclusion

That should get you well on your way of designing your own Navigation Bar. Using these tips you should be able to completely overhault the bar to look exactly the way you want it.