EverWeb’s Navigation Menu Widget is very flexible in how you can style it to create the right effect to suit your website’s design and style. Sometimes the wealth of available options can be a bit bewildering if you’re new to EverWeb… Here’s 15 quick tips to get your Navigation Menu styled how you want it, quick and easy!
- Changing the Navigation Widget’s Default Styling
When you first drop the Navigation Menu Widget on to your page it always displays in blue, underlined text using a Helvetica Regular 12 point font. The Nav Menu Widget doesn’t adopt any ‘Default Styles’ you may have applied using the Format-> Default Styles menu. Only when the Widget’s on the page can you style it as you please.
- Removing the Underlined Text
The reason why the Nav Menu Widget initially displays as it does is because it’s built from Hyperlinks. The colors and underlined appearance are taken from EverWeb’s ‘factory settings’… To remove the underlines and change the text color, select the Nav Menu Widget then go to the Hyperlinks Tab. Change the settings for Normal, Rollover and Visited to what you want them to be. Don’t select the Nav Menu Widget and use Cmd+U to remove the underline as it doesn’t do the job properly.
- Use the Fonts Panel
For styling your Nav Menu’s text, the Fonts Panel is the best tool to use. All the text styling options you need are in one place: System fonts, Google fonts (if installed), font styles (e.g.bold and italic), font size, color and so on.
- Make Your Nav Menu Easy on the Eye
Your Nav Menu should use an easy to read font. Web safe Sans Serif fonts, such as Helvetica, are a good choice. Remember that the font size you choose should also be large enough to cope with any device it will appear on such as mobile phone or desktop. A 16 point, or higher, font size is recommended.
- Text Background Styling
Use the ‘Fill’ option on the ‘Shape Options’ tab for the text background of the Nav Menu. Using the ‘Background Fill’ on the Text Inspector Tab won’t work.
- Fill Color Gaps Between Menu Items
If you’ve styled the text background, there’ll likely be gaps between each menu item. The easiest solution is to place a rectangle shape, color matched to the text background, behind the Nav Menu Widget. Size the rectangle to cover the gaps. Alternatively use Padding, Spacing and Minimum Width options from the Widget Settings Tab although this isn’t as quick, or as easy, as using the backing rectangle. The screenshot below illustrates this and also settings such as Spacing and Minimum Width.
- Avoid Using Gradients Fills
Avoid using any form of gradient filled background in your Nav Menu. They’re generally more difficult to read. Either use a solid ‘Color Fill’ or none at all if possible.
- Use Normal, Mouse Over, Mouse Down in Shape Options
Combining Hyperlink formatting with Shape Options Fills can help you create different effects for Normal, Mouse Over and Mouse Down states. Hyperlink formatting will set the text color, Shape Options Fill states set the background color for ‘Normal’, ‘Mouse Over’ and ‘Mouse Down’.
- Go Full Width
Check ‘Full Width’ in the Metrics Inspector to have the Nav Menu dynamically resize horizontally when you resize the browser window.
- Nav Menu Text Alignment
Using the Text Inspector to change the Nav Menu items alignment to be either left, center or right justified. The other Text Inspector options don’t have any effect on the Nav Menu. Some of the other tips in this blog may help instead!
- Left, Center or Right Align the Nav Menu Itself
The Text Inspector aligns menu items, whilst the ‘Alignment’ option in the Widget Settings Tab left, center or right aligns the Nav Menu itself within it’s selection box.
- Padding, Spacing and Minimum Width
‘Padding’ adds horizontal AND vertical spacing to the Nav Menu. As you increase the value, the Nav Menu adjusts accordingly. It’s useful especially if you have a right aligned, full width, Nav Menu where the menu item bumps up against the browser window edge. A bit of Padding gives the some extra space so the ‘bumping’ doesn’t happen.
‘Spacing’ sets the amount of space between each nav Menu item.
‘Minimum Width’ spaces all Nav Menu items equally. In the screenshot you see the Minimum Width set to 150 as you need to set this value higher than the minimum width of the longest menu item name (in the example ‘Miscellaneous’). Taking this into account makes all menu items appear evenly spaced.
See the screenshot above for some illustrations of these features.
- Change Drop Down Menu Colors
Use the Widget Settings tab to change the drop down menu’s background, separator line and mouse over colors.
- Use Bold and Italic Short Cut Keys but Not Underline
The bold (Cmd+B) and italic keyboard shortcuts can quickly change the Nav Menu style if desired. It’s not recommended to use underline though as the Internet generally uses it to indicate Hyperlinks!
- Quickly Change Nav Menu Text Color
If you only need to change the text color of the Nav Menu, you can do this using the Text Inspector instead of the Fonts Panel.
There are many ways you can get the results you want from the Navigation Menu widget. If it’s your first time using the Widget just experiment a bit to get used to what’s possible! Good luck, and let us know if there’s anything you need to know, or if you have a tip to share, in the Comments section below!EverWeb, Navigation Menu