Enable Phone Text, Social Icons and Search Box in Weebly Header

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
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
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
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.

Related:  How to Add Free Pricing Table in Weebly Site?

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
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
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
Weebly Header Elements View in Published Site
Recommended Articles:

25 thoughts on “Enable Phone Text, Social Icons and Search Box in Weebly Header”

  1. Thanks – this does work, but: you state to paste the code both ABOVE, then later, BELOW the logo code. The correct position appears to be BELOW the logo code :)

    Thanks

    Reply
  2. I just added this code to my theme, modus operandi, and do not see any header elements enabled. Is there anything new with Weebly that necessitates new code? Thanks.

    Reply
  3. This places the social media icons on top of my name. I would like to position it on the same line, to the right of my name. where should I position the HTML code to do this?

    Reply
  4. I am working on a website for a client. I added the code and now have the phone number at the top of the page. It doesn’t render correctly in mobile view. The logo and menu have completely disappeared, however the phone number is visible. Any help?

    Reply
    • This will be the case with responsive themes as the top navigation bar may have a fixed height and floating on top other elements. When the top bar height is increased (due to the addition of phone text) the content may be hidden behind the banner wrapper. Please try to down the banner wrapper to make the hidden elements visible.

      Reply
      • I have same problem when viewing in mobile. The logo disappears and now only the social media and the phone is displayed on mobile view. Can you please specifiy where/how to “down” the banner wrapper as per your suggestion? Is this in CSS?

        Reply
  5. Hi there,

    Thanks so much for posting this.. was a big help!

    Everything looks great for my template with this update on the web but when I view on mobile the logo has been pushed down into the header photo. Is there a way to add additional padding with the social/phone number so it doesn’t effect the mobile view?

    Thanks again for any help!

    Lauren

    Reply
  6. Thanks for the tip, added icons and phone number seamlessly, except the font color of the phone number won’t change from charcoal. I need white as I have a very dark background.

    Thanks again, RJ

    Reply
  7. I was able to get it to work fine in one of Weebly’s templates, but couldn’t get it to align properly to the right in another. Have no idea what setting I should adjust to get these elements to show up at the top right. Took a look using the inspector, but still couldn’t figure it out. Any ideas?

    Reply
  8. My Phone option is present in the code, but I do not get a field to enter the text.
    I assume that the builder opens the last version of the site and then caches the changes and publishes them on the fly? I have root access to the files, is there a place where I can enter some text to the raw file, and then the next time the builder opens I will be able to see the phone text area.

    Steps to reproduce:
    – Toggle Phone Number to On
    * Expected Results: Add Text Field is visible and can be edited
    * Actual Results: No Add Text field text appears for editing.
    If mouse highlighting, the cell for Phone appears to be present.

    Reply
    • We checked again the code in this article and it works fine with the “Add text” field enabled for phone number to type. Either you change the theme or create a dummy site and modify the html to try again.
      Editor caching should not be an issue.

      Reply
  9. Hi, thanks for this really useful information.
    I’m struggling to get mine to line up properly… What I would like is for the social icons to be horizonally in line with my logo. At the moment, I can put it above or below, but it means there is a big gap. Any idea how to fix this?
    Thanks!

    Reply
    • Use nested tables how it is already used in your header to accommodate header and language selection. Currently the language selection is inside a table within

      element of the header table. You can add another segment in header table and add social icons inside that. Reply
  10. Hi. Thanks your tips. But do you know why there is still no SOCIAL ICON after I published the webs? I’m PRO user but PRO service is much worst than a FREE service

    Reply
    • Most of Weebly’s new themes do not have social icons in the header, you need to follow the steps mentioned in the article to enable the option under “Design” tab.

      Reply
    • This is only to enable the options under “Design” tab. If you have Weebly pro then search box can be enabled and visible.

      Reply
  11. Great, it works (activating social icons on weebly theme that dosent have them) thanks a million.
    However, the social icon block in on the left of the header. Which is overcrowded now because that’s where the icon is.
    I’d like to put the social icon block on the right.
    Any idea how i could do that? I’d like to do it in the header CSS if possible – not the main one

    Reply
    • The elements are aligned within a table and “float:right” is the code moving table to right. Try with “Inspect Element” option in Google Chrome to adjust the alignments.
      Weebly has only one CSS though you can add codes under “Settings” tab. (recommended to add site wide codes in main external CSS).

      Reply

Leave a Comment