Inserting Search Box in Weebly Navigation: An Overview

You can easily insert the search button in the body, sidebar and footer of your site but how about on your navigation? I guess that's a bit tricky. You can only learn inserting it when you understand the template itself. You cannot insert the search button via drag and drop so what we will do is to add the full HTML directly to our navigation area. This is just an overview not a detailed tutorial.

INTRODUCTION

Before proceeding you might want to read: Custom Search Engine for Free Weebly Users

First of all, we will hunt the Weebly search box HTML code using Chrome Inspect Element. Keep in mind that every template might have different search HTML so we need to accurately hunt it. EXTREME CAUTION: this is really not for newbie so just use the forum and I will help you. Here are demos of what we are trying to achieve, these are the sites I edited:

For PRO Account search button inserted in navigation, unfortunately he changed it: http://www.yetiproexpeditions.com

For FREE Account search button using Google CSE: http://www.myweeblytricksdemo.weebly.com

TUTORIAL

Well, if you're tough then follow these simple steps.

1. Create a sample page and drag a "search box" element. Publish your site.

2. Go to that site where you inserted the search box. Right click your mouse and choose "Inspect Element". Find the HTML code for the "search box" which is something like this:

<div class="wsite-search-element-outer"><div class="wsite-search-element-align-left" style="padding: 10px 0 10px 0">
  <form class="wsite-search-element-form" action="/apps/search" method="get">
    <div class="wsite-search-element">
      <input class="wsite-input wsite-search-element-input" type="text" name="q" placeholder="Search" autocomplete="off">
      <span class="wsite-search-element-submit" title="Search"></span>
    </div>
  </form>
</div></div>

This is the complete HTML for a sample Search Box Element. Copy the code and paste in a text document. After pasting, change the red text width <td and the green text with </td>.

3. Now we are ready to insert our code. Go to Design > Edit CSS/HTML > click on the "no-header.html" on the Lay out and give your attention to the codes on right.

4. Scan the codes. Here are the key lines we are looking:

<td class="social">{social}</td>
<td class="phone-number">{phone:text}</td>
<td id="logo">{logo}</td>
<td id="nav">{menu}</td>

5. Now things become simple, just decide where to insert your search box. Is it after the logo or after the navigation (menu) it’s up to you. Say you want to insert the search button left of the navigation then we will paste the code from step 2 inside the navigation HTML. We assume that it is already part of the list. Just remember to change the opening and closing tags into <li></li> as I specified on that step.

So here is the output:

<div id="container">
<div id="topnav">
          {menu}
 <li class="wsite-search-element-outer" style="list-style: none;"><div class="wsite-search-element-align-right" style="width: 200px;max-width: 300px;">
  <form class="wsite-search-element-form" action="/apps/search" method="get">
    <div class="wsite-search-element" style="margin-top: 6px;">
      <input class="wsite-input wsite-search-element-input" type="text" name="q" placeholder="Search" autocomplete="off">
      <span class="wsite-search-element-submit" title="Search"></span>
    </div>
  </form>
    </div></li>
<div style="clear:both"></div>
</div>
</div>

The red marked text is the HTML for the navigation while the green is for the search button. The code above simply says that the last element visible on our navigation is the search button. Now all we have to do is the positioning and adjusting of the element. You're done after polishing it.

CONCLUSION

Newbie can't understand this I know. I cannot help you with just one post but you may open your questions by commenting on this tutorial or in our forum. Anyway, one thing for sure, I am willing to help you inserting it your site by myself.

My next topic will be inserting Google Custom Search Engine to your navigation bar. This is good thing for Free users and I will help you insert it. Stay tune, subscribe to my FeedBurner to be updated.

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!