This is a common request we see about the place on our Academy Support Forums and blog comments, so we decided to do a quick video tutorial for you.
More more like this join the PootlePress Academy!
Introduction
Step 1 – the header widget area
Step 2 – adding social icons
Step 3 – take out unwated text and align left with CSS
Here is the code for step 3:
[box]
#connect h3 { display: none; }
#connect p { display: none; }
#connect .social { text-align: right; }
[/box]
Step 4 – adding contact details
It would be great to hear more and see examples of what people have done in their Canvas headers. Post a link to your site in the comments : )
Comments
10 responses to “How to add social icons & contact info to the header in WooThemes Canvas”
On Pootle press website you have wording and a link in your header area. It is a lovely testimonial.
How do you ad text with live links to the header area?
Many thanks
Hi Faith,
A cheats way to do this is to create the link in a post or page then click on the text tab. Then copy the html and just paste into a header text widget 🙂
Jamie
Is there any way to put font awesome icons into the Canvas primary navigation menu itself, say, just left of the search icon? This seems to be a major limitation of Canvas — the manipulation of the primary navigation menu for anything other than Page Titles. Trying to find a work around.
Hi Kitsch,
There soon will be! We are just finishing off a new Canvas Extension called ‘Font Awesome Menus for Canvas’. It should be released next week (week commencing Monday 28th April).
Thanks!
Nick
Tried this exactly as described and it didn’t work. I’m using the child theme downloaded from your site.
However, when I place the same code in JetPack’s custom css or in the General Settings | Display Options | Custom CSS it works fine.
Any thoughts on why it won’t work with the child theme itself?
I’m using
* Pootlepress Canvas Child ThemeVersion: 1
* Canvas Framework 6.0
* Canvas Theme 5.8.1
Solved the problem. It seems my host is doing some really heavy caching. They kept serving the cached file without the changes.
I changed themes, renamed the child theme, and reactivated it to get it to work.
Ok, great Kevin – glad you found the problem!
Hi Nick. Exactly what I needed. Thanks! For some reason though, the text reappears when I go into mobile screen size. Any thoughts on why that might be happening? Very frustrating.
Hi Ivan,
Weird. Can you post the URL to your site?
I have a custom logo that I added in the general settings tab.
I also have some text in the “inside the #header DIV tag” hook.
When I set up the widget as shown above, it places the content in the lower right of the header area. I want it to be upper right as in your video. Do you know what I’m doing wrong?