Styling the Responsive Navigation Headers
Contents
Styling a Responsive Design for Mobile Devices
Styling the Responsive Navigation and Menu Button
Styling the Responsive Navigation Headers
The responsive navigation headers only appear in mobile devices (768px and 447px).
To style the desktop horizontal navigation (except for the background color), style the Horizontal Navigation and the Horizontal Navigation Submenus.
The responsive navigation headers display vertically down the screen after the visitor clicks on the Menu button.
To style the headers, you must click on the Menu button first. Remember to customize for both 768px (tablet) and 447px (mobile phone) breakpoints.
If you're ever unsure what a button does, hover over it for a second. Its function will appear as a tooltip.
Text
With the Text tools, you can customize the following for the nav headers text...
-
font type
-
font size
-
bold and italic
-
text color
-
alignment
You can also customize other options by opening the Advanced Styles overlay.
Font Picker
- Click on the A button.
-
Hover over a font to preview it. Click on a font to select it.
Or click on Reset to Template Default to return to the default font. - Click on Set Font to save this selection, Cancel to close the tool and make no change.
Click on the A button to change the font of your headers text. An overlay window opens on top of your template.
Hover over each font to see what it looks like in the preview box at the top of the picker.
Choose a font that suits the look of your template.
Click on the font you want to use. It will now have a red border.
Click on Set Font to save your selection.
The overlay window will close and the headers will immediately appear with the selected font.
Font Size
-
Click on the + button to increase the size of the text. Click on the – button to decrease the text size.
Or click on the number to open the edit box. Double-click on the number and type in the new size.
The responsive navigation headers are an important way to simplify your navigation for mobile visitors. So make the font size big enough for them to read easily.
Click on the + button to make the text larger. We recommend that you not make it any smaller.
The headers will immediately appear in a different size (one pixel bigger, per click) in the template. The size indicator will also change to the current pixel size.
Click on that button again to continue increasing the font size. The size indicator will continue to change.
You can also click on the current size number (in the screenshot below, 15). This opens a small edit box. Double-click on the number to highlight it, then type in the size you want. Click anywhere in the toolbar to close the box. You'll see your new number there, and the text will display in that new size.
Bold and Italic
- Click on the B button to add/remove bold to/from the headers text.
- Click on the I button to add/remove italics to/from the text.
Depending on the design you chose, the navigation headers text is probably bolded. We recommend leaving it as it is.
Add italics (the I button) if it suits your design.
Click on the B button to make the headers bold, if it's not already.
Bold and italic can be combined (click on both buttons).
Text Color
- Click on the Color Palette button to open the color picker.
-
Select a color from the palette. Click on the rainbow slider to choose another color base for the palette.
Or enter a 6-character hex value. Or, if you've already saved colors, choose one from Your Custom Colors.
Or click on Reset to Template Default to go back to the original text color. - Click Set Text Color to save this selection. Click Cancel to close the tool and make no change.
The color of the headers text should suit the overall look of your template. More importantly, it needs to stand out against the responsive navigation background color.
Click on the Color Palette button. This opens an overlay window with the color picker.
Select the color you want from the palette, enter a 6-character hex value, or select a color from Your Custom Colors.
You can also go back to the original color in your template by clicking on Reset to Template Default.
Click on Set Text Color to save your selection. The overlay window will close. You'll see the headers text with this color change.
Tips
-
The color inside the small circle is indicated in the hex value box. Alternately, entering a 6-character hex value changes the location of the small circle inside the palette.
-
Dragging the slider in the rainbow column leaves the small circle in the same position on the palette, as the colors change beneath it.
-
As you set colors in the various color pickers (text, border, background), those colors are added to the "crayon box" (called Your Custom Colors) for easy access when editing other parts of your template. Use Your Custom Colors to create a color scheme for your site.
Advanced Styles
- Click on the gears button to open the Advanced Styles overlay.
- Adjust the letter spacing, word spacing and line height. Use the font variant and text transform, if desired.
- Click on the x in the top left corner of the overlay to close it.
Letter Spacing lets you add or remove space between the letters in every word in each nav header.
Word Spacing lets you add or remove space between the words in each nav header.
For each of them, click on the + button to add space, and the – button to remove space. Or click on the Revert button to go back to the default spacing.
Font Variant lets you switch to an ALL CAPS version of your font. Any letter that would normally be capitalized has a slightly larger height than the "lowercase" letters.
Text Transform lets you set each word to start with a Capitalized Letter, or have every word start with a lower text letter, or make every letter a CAPITAL.
When you're done, click on the x in the top left corner of the overlay to close it and return to the Site Designer main toolbar.
Background
You have several options for the background of your responsive navigation headers.
You can select a color from the color palette. You can upload a background image. You can also keep the background as is, with no changes, or revert to the default for your template.
You also have full control, in the Advanced Styles overlay, of the positioning and tiling of any background image that you upload.
Background Color
- Click on the Color Palette button.
-
Click on the palette to select a color. Click on the rainbow slider to choose another color base for the palette.
Or enter a 6-character hex value. Or, if you've already saved colors, choose one from Your Custom Colors. Or select Transparent.
Or click on Reset to Template Default to go back to the original background color. - Click Set Background Color to save this selection. Click Cancel to close the tool and make no change.
Select a background color that suits your template's overall color scheme.
For example, if your template's color scheme is various shades of green, you may want to choose another shade of green. Or perhaps a brown color would work.
But a pink or a bright orange would not likely be a good choice.
Click on the color palette button to open the color picker.
Select your color by clicking on the palette or dragging the small circle around the palette. Click on the rainbow slider to reach the desired palette of colors.
Or you can enter a 6-character hex value for the color you want to use.
You can also choose from a color in Your Custom Colors, which is available after you've selected at least one custom color in any of the color pickers. Hover over any color to see where else in your design that you've used that color.
Another option is to choose Transparent. This will make the background beneath your nav headers the color of the responsive navigation background.
Click on Set Background Color to save your change. The overlay window will close and your new background color will appear. Be sure to set this for both 768px and 447px.
Upload Background Image
- Click on the Upload Image button.
- Click on the Browse button (Choose File if you're using Safari). Navigate to the desired background image and select it.
- Click on the Upload New Background Image button.
If you would like the navigation to sit on something more than just a background color, you can upload an image.
Most background images are small images that are then "tiled," that is, they're repeated from left to right, or from top to bottom, or both.
So ensure that you have an image that looks good when repeated multiple times across and down the page, especially since the responsive navigation is horizontal in desktop devices and vertical in phones.
You may have to experiment with different image widths and heights until you find the right image size that looks good when tiled.
Click on the Upload Image button (second from the left in the toolbar). This will open an overlay window...
Click on Browse (Choose File if you're using Safari) to locate the file. Click to select the file.
Click on Upload New Background Image to upload it.
The overlay window will close. You'll see the navigation with your new background image. Be sure to set this for both 768px and 447px.
Remove Background Image
- Click on the Remove Image button.
If you uploaded a background image, but decide you'd like to have no image, you can remove it.
The background image appearing in the responsive navigation will disappear, leaving you with the current background color.
Reset
- Click on the Reset button.
You can also reset the background image changes you made. This resets only the background image settings.
It does not affect the text settings you made (above) or any other changes to your template.
Advanced Styles
- Click on the gears button to open the Advanced Styles overlay.
-
Click on Position V and select from Top, Center and Bottom.
And/or click on Position H and select from Left, Center and Right. -
Click on the Background Repeat Down arrow button to activate image tiling vertically.
Click on the Background Repeat Right arrow to activate image tiling horizontally, if required. - Click again on the Down arrow button to deactivate tiling vertically. Click again on the Right arrow to deactivate tiling horizontally.
- Click on the Download Background Image Down button to download the background image, if your design comes with one.
If you uploaded a background image, you have full control over it.
You can change the position of the image (Position V or Position H) or tile it down the button height or across the button width (Down arrow and Right arrow buttons).
For the responsive navigation, activate the tiling (there will be a border around the activated button) so that the image fills the entire navigation area.
Click on the Download Background Image Down button to download the background image, if your design comes with one.