Changing The Length of Your Custom NavBar

We get many requests from our Help Desk. And some of them might benefit many of our readers. So we thought it would be nice to share some of the Q&A's as they come along.

Question: 

I have created a custom Navigation Bar but it will not span the length of header. Instead it drops to 2 lines. The header is 980 px and the Nav Bar is only 920 px, so I don't understand how to fix this? I am stumped. Can you help?

Answer:

Yes! Well, I hope so. Having created many a blog with a Nav Bar under the header or banner, I have run into this very problem. The pixel width matches your outer wrapper value, but the Nav Bar is wrapping to the second line. In my experience, you need to adjust the size of the "width" for each cell, or button in your Nav Bar. When they are adding up to a dimension wider than that outer wrapper, they will wrap (even if your overall value for the Nav Bar is set to the correct size). Here is what the code would look like. I've highlighted the area that might be causing you trouble, as well as the width for the entire Nav Bar: (this is the code from our site, so your values would be different)

}

/* Navigation tabs start */

a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:120px; height:25px; background:#d9c262; border:0px solid black; margin-top:0px; text-align:center; text-decoration:none; font-family:georgia; font-size:13px; letter-spacing: .12em; color:#5a340d; line-height:25px; overflow:hidden; float:left;}

a.navitabs:hover {color:#5a340d; background:#59330c;}

#navibar {width:1000px; margin:-20 auto;}

/* Navigation tabs end */ 

The first "width" value in red is the width of each little button. The second is the width of the entire Nav Bar. You will need to change that initial width value until they all fit on the same line. You can estimate with simple math. Go ahead and set your Nav Bar width to 980px to give you enough room. Then count how many buttons you want, and divide 980 (or whatever your Nav Bar width is) by that number. That should give you a good estimate on the value of that first width.

**I use the tutorial from THIS site every time. In no way do I have this memorized, and I use this as reference each time. I also have to play the little back-and-forth game with the pixel values every time, until it fits. Tip: Keep a second tab open with your site, so that you can refresh and toggle back and forth more quickly.

I hope his helped solve your problem! If it is not quite the right solution, there are many ways to install a Nav Bar, and I may need to take a look at your specific code. Thanks!