Weebly removed the option for displaying phone number, social icons and search box in site’s header area in most of the new themes. Displaying social icons with the text message like “Follow Us” is definitely a good option though search box is only applicable for pro users. When you choose any of the new themes and navigate to “Design” tab you will not see an option to enable or disable these elements in the header.
It is not possible to drag and drop elements in site’s header area and hence published site also will not have any phone number, social icons or search box in header.
Though you can add custom elements like Google custom search box and any social widgets it is very easy to enable default Weebly header elements by modifying source HTML / CSS.
Enabling the Options under Design Tab
Under “Design” tab click on “Edit HTML / CSS” button and select the page layout you want to add header elements. For example, here we modify “no-header.html” page. Locate the code for displaying logo, it will look something like below:
<div id="logo">{logo}</div>
Add the following code above the logo code:
<table id="header"> <tr> <td id="header-right"> <table> <tr> <td class="phone-number">{phone:text}</td> <td class="social">{social}</td> </tr> <tr> <td colspan="2" class="search">{search}</td> </tr> </table> </td> </tr> </table>
It will look like below:
Save you changes and check under “Design” tab where you can see the search box, social icons and phone number fields are enabled. Disable search box option if you are not a Weebly pro user.
Modifying CSS
Adding the above code in source HTML is sufficient to enable default header elements in Weebly. If you want to customize more, then add the following code for phone number field and search box in your “main-style.css”. You can customize these styles according to your theme layout.
Header Elements Style
/* Header: Elements Style ------------------------------------------------------------*/ #header { border-collapse: collapse; border-spacing: 0; width:100%; } #header td { vertical-align: middle; text-align: left; } #header-right table { float: right; width: 1px; border-collapse:collapse; } #header-right td { padding: 0; }
Header Phone Number Style
/* Header: Phone Number ------------------------------------------------------------*/ #header-right .phone-number { text-align:right; } #header-right .phone-number .wsite-text { display: block; white-space: nowrap; }
Header Search Box Style
/* Header: Search Box ------------------------------------------------------------*/ #header-right .wsite-search { float:right; } #header-right .wsite-search { margin: 16px 0px 0px; vertical-align: middle; position: relative; right: -2px; } #header-right .wsite-search-input { width: 166px; height: 25px; border: none; font-family: 'Rosario', sans-serif; color: #414141; font-size:13px ; background: url(search-text.png) no-repeat top left; float:left; } #header-right .wsite-search-button { position: relative; width: 33px; height: 33px; background: url(search-button.png) no-repeat; }
Adding Social Links and Phone Text
- Hover over the mouse on social icons to see the drop-down and enter your social URLs in the text boxes.
- Phone number field is available left side of the social icons. Click there and add a phone number or text like “Follow Us”.
Publish your site and it will look like as below:
25 Comments
Leave your reply.