Fixing Long 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" in Notepad or a simple text editor. Some fonts are also skinny 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
Style #1: (be sure you backup your .css file before editing)
You will only change one area:
.menulinks { FONT: 13px arial, verdana, sans-serif; font-weight: normal }
Style #2: (be sure you backup your .css file before editing)
You must change two areas:
.button { background-image: url("picts/button.gif");
background-color:#000000;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #FFFFFF;
font-size: 9pt;
height: 22px;
cursor:hand;
font-weight;
padding-left: 4px;
padding-left: 4px;
text-align: center;
BORDER: #666666 0px solid }
.buttonon { background-image: url("picts/buttonon.gif");
background-color:#333333;
FONT-FAMILY: arial, verdana, helvetica, sans;
color: #9999CC;
font-size: 9pt;
height: 22px;
cursor:hand;
font-weight;
padding-left: 4px;
padding-left: 4px;
text-align: center;
BORDER: #FFFFFF 0px solid }
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.
Solution #2: 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 #3: 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 #4: Add Alternate Navigation
You can add a Javascript selector to the body of your webpages.
Click here for the script
Related Topics:
Editing the Menus
|