Why is this happening?
Several of our themes have the logo/title area and menu side-by-side, on the right or left, respectively. Because they appear side-by-side, there is only so much space for the menu. If you add too many items to the menu, one of the menu items will either wrap to the next line or slide behind the space allotted to the logo or title (while you may be able to see it, you can’t click it).
How do I fix it?
You can fix this by reducing the amount of space your menu is taking up. Here are several ways to do this:
1) Reduce the NUMBER of menu items by removing items from the menu, or making some items sub-menu items under others.
2) Reduce the font size of the menu items. Go to Theme Options > Customize Theme > Header. At the bottom you will see settings for menus and drop downs. Reduce the font size of these options from, say, 12 to 11.
3) Reduce the spacing between menu items. We do not currently have a built in option for this, but you can do it easily by adding a bit of code. Go to Theme Options > Other Options and find the Custom CSS box. Copy in the following code:
.menu a:link, .menu a:visited {
padding-right: 12px;
padding-left: 12px;
}
Save your changes. You may want to adjust the 12’s above to some other number until you get the spacing just how you like it.
4) Reduce the width of the container for the logo. Your logo sits inside a container. Even if your logo is relatively small, it’s the size of the container that matters. If your logo is smaller, you can reduce the size of the logo container by adding this to your Custom CSS box:
#branding {width:300px;}
Again, save your changes. Adjust the 300 number above if necessary.