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.
No Header Elements in Weebly Theme
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.
No Header Elements in Weebly Site
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:
Add Header Elements Code in Weebly
Different themes may have different code, in general add the code below your logo code or try out with different places to get the elements aligned.
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.
Enabled Header Elements in Weebly Design Tab
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.
Code for social elements will be already there in CSS, hence you need not add it again.
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”.
Edit Phone Number and Social Icons in Header
Publish your site and it will look like as below:
Weebly Header Elements View in Published Site
25 Comments
Leave your reply.