Navigation Bar & Custom CSS

By Alex Seigfried posted May 06, 2011 01:19 PM

So today I'm going to talk about the navigation bar, on our website you'll notice the navigation bar doesn't look anything like the out-of-the-box version.  That's because when i initially designed Engage I didn't understand what I could or couldn't do in terms of customizing.

So I had big colorful images replacing the standard web text navigation, which I assumed was something that could be done.  Turns out that's not a correct assumption... so we kicked it around a bit and decided that we just couldn't live with the standard look and I started to experiment.

Did you know that you can supersede HL Css by putting your own into a Content Item?  It only affects the page it's on, but it's a great way to experiment.

Install Your CSS
1. Go to your Experiment Page, create a new one or use an existing one (don't worry this won't break anything).

2. Click "Add to this Page".

3. Name your new Content Item: Custom Css - Test

4. Make sure to choose Type of Content: HTML

5. Now click the HTML tag at the bottom of the Rich Text Editor, this is where you can either:
a. put a link to an external CSS file on your server
b. create styles directly <style></style>

6. Click Save

OK, so now we can play with CSS, you'll have to have some background in HTML/CSS to do these things so ask your handy IT or Web Professional to do this for you.

Open up your Chrome Browser or Firefox Browser with Firebug installed, if you don't have either of these they are freely available online.

Go to your Experiment page and right-click the navi, choose inspect element and take a look at all the IDs and Classes HL has assigned to things.  If you're using Chrome you can just start changing code right there in your browser by double clicking sections and hitting enter.  Change it back by just refreshing the page.

What I did on Engage
1. I took the .navi class and increased it's top padding to accommodated a background image, this made the navi taller.  Then assigned a background image to the same class.

2. You'll notice that your navigation web text is visible, if you like the way that looks then just line-up the background image to match the navi items.  You'll have to do this every time you change the navigation titles significantly. 

3 . I was not happy with the way the web text looked so with some experimentation i found the classes and subclasses  of .MPButtonNav (there are ul and li classes under this) that contained the web text links.  

4. I made all the text and background colors transparent (background-color, color), which worked great on all browsers accept IE7 (i had to mess with the 'filter:alpha' command in CSS to get this to work properly).  I ended up with quite a mess of CSS classes/ids before all was said and done.

5. So now we have invisible text that sit on top of a background image, it may take some tweaking with the padding but you'll get it to line up properly.  The link field that is automatically set around each navigation item is fairly large so drop down menus are easy to simulate. Simply move your background art around till it functions properly.

What I'd like to see in the future:
1) New Navigation widget that allowed me to assign images to navigation positions.  Ex. On navigation branch I have Profile listed, click it, then click Edit, insert option to replace the text 'Profile' with an image.

2) Navigation across Microsites: option to link navigation to main site so changes in one area are auto-updated to the other.  alt-option: link navigation on specific microsites to other microsites.