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
How to insert an HTML snippet
Inserting HTML in Properties Editor
Inserting code into the Head of your site
<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.
Saving the .css file in File Manager
COPY CODE below to text editor
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.
Home     Tools    FAQs     Web Design    Tips     Tutorials    Forum    Contact    Site  Map
Guides to using the Tools in the SiteBuilder program
Frequently asked questions about using Site Builder software
Homestead website design guides
Enhance the Homestead website with these tips
Tutorials to help Homestead users with creating their website
Homestead Connection Site Map and Search function
Homestead website design guides
Enhance the Homestead website with these tips
Tutorials to help Homestead users with creating their website