CSS :: Creating a menu in Homestead SiteBuilder
Creating a menu/navigation using an external CSS style sheet allows the user to make changes such as font size or type, background color, etc., to the menu site-wide without having to go to each page. It also is readable by Search Engines. It DOES NOT, however, allow the user to change, add or delete the text within the menu (HOME -ABOUT, etc.) That must still be done by changing the code within the insert HTML box and then copying and pasting the revised code to each page.
Tutorial Submitted by :: sj enterprises
Steps to create the menu below:
- Copy the entire code in the box below.
- The code is placed in an Insert HTML box. Click the icon in the toolbar.
- Click on Insert HTML.
- On the Properties Editor click Enter or Paste and paste the code into the box that opens.
- Change the addresses following href = to reflect your page URLs (addresses).
- Copy the code below
- Paste into a text editor such as Note Pad - Do not use Word or Works or similar programs as they can add extra formatting.
- Make your changes to font, background color, padding, etc.
- Save As a .css file. You will use this file to make future changes to your navigation so save it in a memorable place on your computer.
- Import or drag the file into the File Manager in SiteBuilder and publish.
- Change the address in red in the code below to reflect the location of the file you pasted in the File Manager per instructions above.
- Click Advanced on the Properties Editor tab and paste the code into the HTML <Head> Tag box. You will need to do this on every page in your site.
<link href="http://www.homesteadconnection.com/files/CSS/CSSHCnav2.css" rel="stylesheet" type="text/css" />
The navigation will not appear in your Edit mode. Once all the steps above are complete, go to Preview mode. It is likely that the navigation will need to be re-positioned or re-sized. This is all done in Edit mode by moving the 'box' containing the navigation and rechecking Preview until you have it placed where you want. Change the width of the 'box' if one or more of your menu items has dropped down to a second line. You can resize by selecting the box and pulling it out to increase the width or enter the desired width in Properties Editor/Insert HTML.
Once you have the box placed where you want it, click on it, choose copy from the Edit menu or Crtl C then paste or Crtl V on each page in your site.
To make future changes to the navigation:
- Delete the current .css file in File Manager
- Go to the original css file that you saved on your computer.
- Make the style changes you want
- Save the file with the same name as the original (overwrite existing file)
- Import or drag the file into File Manager in the same location as you put the original. Again accept the overwrite.
- Publish
<li><a href="http://www.your page address.com/page title.html ">Name of page to appear in menu - Home</a></li>
COPY CODE and place in HTML Insert box as per instructions above.
COPY CODE below to text editor
STEP 1
STEP 2
STEP 3
STEP 4
STEP 5
CODE (change only the part shown in red) then copy the entire snippet and paste in Advanced on every page.
The portion shown in red is what you will change in the code to reflect your site address and the name you want to appear in your menu. Use notepad or another text editor to make the changes then copy and paste into the HTML box. Be sure to change each instance of the code.
Copyright 2006 - Homestead Connection - All Rights Reserved
Homestead Website Design and SEO - S&J Enterprises
Use the internal search feature to the right or the site map for easy access to information.
| ||||
