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 page layout

On the left, select the page layout you'd like to install the navigation on.

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 Navigation HTML Code

On the right, add the HTML code below right after the white "{footer}" mustache code:

<table id="bot">
<tr>
<td >Tricks</td>
<td >Forum</td>
</tr>

<tr>
<td><a href="/index.html">Link 1</a></td>
<td><a href="/contact">Link 1</a></td>
</tr>
<tr>
<td><a href="/index.html">Link 2</a></td>
<td><a href="/index.html">Link 2</a></td>
</tr>
<tr>
<td><a href="/index.html">Link 3</a></td>
<td><a href="/index.html">Link 3</a></td>
</tr>
<tr>
<td><a href="/index.html">Link 4</a></td>
<td><a href="/index.html">Link 4</a></td>

</tr>
<tr>
</tr>

</table>

Note: This is your navigation code. Change the column titles and links to your needs.

---

Step 4. Add the social media HTML code

Add the HTML code below directly beneath the code you just added from Step 3:

<div id="social">
<table>
<tr>
<td><a href="Your Facebook URL Here" class="highlightit" target=newtab><img src="/files/theme/facebook_active.png"></a></td>
<td><a href="Your Twitter URL Here" class="highlightit" target=newtab><img src="/files/theme/twitter_active.png"></a></td>
<td><a href="Your Google+ URL Here" class="highlightit" target=newtab><img src="/files/theme/google_active.png"></a></td>
<td><a href="Your Youtube URL Here" class="highlightit" target=newtab><img src="/files/theme/youtube_active.png"></a></td>
</tr>
</table>
<p>Find Weebly Tricks on Facebook, Twitter, Google+, and Youtube</p>
</div>

Note: This is your social media code. Change the links to your needs.

---

Step 5. Add CSS Code

Click on "main-style.css" on the left, and scroll all the way to the bottom. Add the following CSS code so the navigation and social media icons align correctly:

#bot {
border-collapse: collapse;
border-spacing: 0;
width: 700px;
height: 10px;
float:left;
}

#bot td {
padding-bottom:5px;
font-size:12px;
text-align:left;
padding-left:50px;
padding-top:3px;
color:white;
}

#bot a {
color:#fff !important; /** This will change the link colors**/
}

#bot a:hover {
text-decoration:underline;
color:#700ebe;
}

#social {
color:white;
padding-bottom:100px;
}

#social img {
padding-right:10px;
}

.highlightit img { /** This allows the social media icons to fade when hovered by the mouse**/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.9;
opacity: 0.9;
}

.highlightit:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 5;
opacity: 5;
}

Click save.

---

You're done! Publish your site to see how your navigation looks!

---

comments powered by Disqus