Bloggy Help:

 photo socialmedia_zps413c1040.png  photo helpdeskbutton_zpsb16b6c42.png  photo instagram_zps73b3c07a.png  photo header_zps97df3d3e.png  photo needamakeover_zps6d19d8a9.png

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.

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?

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!


  1. Thanks for the quick response. I was wondering if I needed to change something in the html. However, I expanded the template; use Ctr+F and did a search on several of the items in the code and I came back with nothing that resembled the code that you have shown here. This is the closest I came up with:

    and I did find this:

    .tabs-inner .widget ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: $(tabs.border.width) solid $(tabs.border.color);

    Also, why would it look correct on my computer, yet it others see it with the tab on the second line? We both have wide screen computers.

  2. Very nicely reorganized! Easy to read and easy to use.

  3. oh my - fabulous re-design...very nice!


Comments are how we stay connected as bloggers. Let us know how you feel and we'll return the favor...stay calm and blog on!!! And guess what? You'll never find Word Verification on our gets kind of annoying when you can't read what WV wants you to verify right?

Note: Only a member of this blog may post a comment.