Fixing Wide or Wrapping Menu Buttons

Menu setup and fixes in Allwebco templates

Solution #1: Reduce padding and font size
Reduce the px size of the padding or menu font in the .css file. Menu code will be either in the menu .css file or near the bottom of your style .css file. Code in your template may appear similar to the following. Edit the font and top and bottom padding as highlighted below.

#menusub a {
	color: #FFFFFF;
	font-family: "Open Sans", arial, helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	line-height: normal;
	text-decoration: none;
	text-align: center;
	padding: 14px 15px 14px 15px;
	margin: 0px 0px 0px 0px;
	cursor: pointer;
	background-color: transparent;
	display: inline-block;
	}

Note: Some templates may include a ".menu" and a ".menuon" class for the hover. In this case you'll need to edit the padding and/or fonts in both classes.

Narrow fonts: Using a more narrow font face will allow for longer menu button names. Google offers free fonts for websites and has many narrow style fonts available.

• See: using Google fonts

Drop menu template notes:
For drop menu templates, edit the "menu.css" or "drop-menu.css" file. You can reduce the padding and fonts for both the top-level and sub-levels. The overall width of the drop down sub menus is also editable. See the help.html included with your template download for the correct info and support links for your menu type.


Solution #2: Shorten menu 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. Once clicked, the page that is displayed will give the user more info.


Solution #3: Text-indent and padding:
Most template menu CSS code includes left and right padding for the menus. In some cases "text-indent" CSS code may be used. You can edit the text-indent to a smaller px number.


Solution #4: 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 #5: Put long link names on the webpages
Add long and descriptive links directly to the HTML pages or in the template sidebar. Optionally create a "site map" page that has long descriptive links, then add a link to your "Site Map" page onto the menu.


Solution #6: Add alternate navigation
If your template does not include drop menus you can contact us for an add-on. Optionally add a Javascript selector to the body of your webpages.

• See: Javascript selector drop down

Related Topics:
Editing the Menus