Categories

HTML Based. How to edit main menu

Chris Diaz December 5, 2011
Rating: 3.5/5. From 2 votes.
Please wait...

This tutorial shows how to edit main menu in HTML based template.

First of all open the template package and go to the "site" folder. There you can see several HTML files. Each file is a separate page of the template.

The menu is included into each file so if you change it once you need to perform the same changes in any file.

The meny is usually created as an unordered list where each menu button is a list item with embedded link:

<ul class="sf-menu">
	<li class="current"><a href="index.html">about us</a></li>
	<li><a href="index-1.html">our services</a>
		<ul>
			<li><a href="#">services list</a></li>
			<li><a href="#">special offer</a>
				<ul>
					<li><a href="#">growing plants</a></li>
					<li><a href="#">vegetables</a></li>
				</ul>
			</li>
			<li><a href="#">consulting</a></li>
		</ul>
	</li>
	<li><a href="index-2.html">products</a></li>
	<li><a href="index-3.html">links</a></li>
	<li class="last"><a href="index-4.html">contacts</a></li>
</ul>

This is how each menu item looks like:

<li><a href="index.html">about us</a></li>

Let’s see how to edit it.

To change the menu title edit text between the <a href="…"> and </a> tags.

To change the menu item link edit the href attribute value of the link tag. In the examlpe above the href attribute value is "index.html". Replace it with your URL or the filename to change the links.

Feel free to check the detailed video tutorial below:

HTML Based. How to edit main menu
This entry was posted in Full Site Template Tutorials, Working with HTML and tagged HTML, link, list, menu, title. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket