Fixing Long or Wrapping Menu Buttons
Sometimes after editing the menu.js you will find that the text has made the buttons too long or the text is outside of the menu or the webpage is just too wide. There are a few solutions for this.
Solution #1: Make the menu text size or font smaller
Any Allwebco template can have the text made smaller on the menus by editing the "coolstyle.css" or the "corporatestyle.css" or the "menu.css" in Notepad or a simple text editor. Some fonts are also narrow and will fit more text. Every template is a little different, however, the following lines, or similar lines, will appear in your .css file:
File To Edit: coolstyle.css or corporatestyle.css or menu.css or drop-menu.css
CSS menu code: (be sure you backup your .css file before editing)
You must change two areas:
In the examples above, you can either edit the "font-size" (in red) or you can change the font face by adding "arial NARROW," (in red). Keep in mind that "Verdana" and "Geneva" are wide fonts, "arial" is more narrow and "arial NARROW" is the thinnest standard font you should use. If you do not use standard fonts, the menus may not look right on other computers because the users may not have the font you are using installed.
Drop menu template notes:
For drop menu templates, you will instead edit the "menu.css" or "drop-menu.css" file. See the "help.html" included with your template for the links to the correct menu editing support page for your menu type.
Also check in your "menu.js" file for this variable that you can edit to make the menu wider and prevent wrapping:
var menuwidth = "750"
Solution #2: Decrease the menu padding:
Most template menu CSS code includes left and right padding for the menus. In some cases this may also be "text-indent" CSS code. Check in your template CSS files in the menu code for this type of padding and make the padding a smaller number.
Solution #3: Decrease menu widths:
Some templates may have widths set in the "menu.js" file instead of the CSS files. Search your "menu.js" for "width" to see if this code is included that you can edit. Menu "widths" code is included in very few template models.
Solution #4: Shorten the names
Try to make your button names as short as possible. On any menu, you typically want to use very short descriptive names as opposed to trying to describe the page the button leads to. Remember, once clicked, the page that shows up will give more info in the title right away.
Solution #5: Put long link names on the page instead
You can add a link anywhere on the page instead that can be long and descriptive, also, you could even create a "site map" page that has long descriptive links for all your pages and then on the menu simply put "Site Map". Optionally, you can also have a very short term on the menu for long links and then have a descriptive link on the page so it won't be missed.
Solution #6: Add alternate navigation
You can add a Javascript selector to the body of your webpages. Click here for the script
