Tutorial Stats
How To Put A Navigation At The Very Top Of Your Weebly Site
Tutorial Description
This tutorial will show you how to add a second navigation at the very top of your Weebly site.
SHOW MORE
Tutorial
Step 1. Open Weebly's HTML/CSS Editor
Click on "Design" at the top of the page, and then click on "Edit HTML/CSS" on the bottom-left side of the page.
Step 2. Select your site's layout
Select the page layout your site uses on the left.
Note: If you use multiple page layouts for your site, you will need to perform this process for each individual page layout that you use. The navigation will only appear on the page layouts you customize.
Note: If you use multiple page layouts for your site, you will need to perform this process for each individual page layout that you use. The navigation will only appear on the page layouts you customize.
Step 3. Add HTML Code
Add the HTML code below directly beneath the "<body>" code:
<div id="prehead">
<div id="headcont">
<table id="top">
<tr>
<td>
<a href="/index.html">Home</a>
<a href="http://www.weeblytricks.com/tricks"><span title="Weebly Tricks">Tricks</span></a>
<a href="/about">About Us</a>
<a href="/contact" >Contact</a>
</td>
</tr>
</table>
</div>
</div>
<div id="prehead">
<div id="headcont">
<table id="top">
<tr>
<td>
<a href="/index.html">Home</a>
<a href="http://www.weeblytricks.com/tricks"><span title="Weebly Tricks">Tricks</span></a>
<a href="/about">About Us</a>
<a href="/contact" >Contact</a>
</td>
</tr>
</table>
</div>
</div>
Step 4. Add CSS Code
Click on "main-style.css" on the left, scroll all the way to the bottom and add the following CSS Code:
#prehead {
min-width:960px;
background:#000000;
border-bottom:1px solid #666;
}
#headcont {
margin: 0 auto;
width: 960px;
}
#top {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 10px;
line-height:10px;
}
#top td {
padding-top:10px;
padding-bottom:10px;
font-size:12px;
text-align:right;
padding-right:10px;
}
#top td a:link {
padding-left:15px;
color:3366cc;
padding-right:15px;
}
#top a {
color:#fff;
border-right:1px solid #700ebe;
}
#top td a:hover {
text-decoration:underline;
color:#700ebe;
}
Click save.
#prehead {
min-width:960px;
background:#000000;
border-bottom:1px solid #666;
}
#headcont {
margin: 0 auto;
width: 960px;
}
#top {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 10px;
line-height:10px;
}
#top td {
padding-top:10px;
padding-bottom:10px;
font-size:12px;
text-align:right;
padding-right:10px;
}
#top td a:link {
padding-left:15px;
color:3366cc;
padding-right:15px;
}
#top a {
color:#fff;
border-right:1px solid #700ebe;
}
#top td a:hover {
text-decoration:underline;
color:#700ebe;
}
Click save.
You're done! Publish your site to see how your new navigation looks!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
