Screencast Tuesday: Fluid Headers and Footer with Headway 3.0

Notice! Headway 3.5 includes fluid header/footer capabilities with its multiple wrapper system. Learn More »

And after a day late, we’re out! I had set this up to automatically post yesterday so I could finish my last minute Christmas shopping. Needless to say that all didn’t happen. So I got it up today! 🙂

Today we’re going to talk about creating fluid headers and footers with just a little bit of code. I’m also trying something a little different and including the code here.

Here’s the video! Hope you guys enjoy!

Spread the word!

26 Responses

  1. This is genius AJ! Thanks for your tutorial. I can’t wait until this type of functionality is in place with the visual editor (because I am lazy and don’t really want to learn the coding aspect, but I can do it).

    Happy Holidays!


    • @edantehamilton Yep. We hope to add it back in soon. But we want to add it right. Not just put a bandaid over it. The way we have in mind will be really cool and allow for more than just a header or footer block to go in there.

      • @AJMorris  @edantehamilton
         Any idea when this would be back in the 3 version of the product?  It’s been a year since this post and it’s still not available.

    • @JordanSkole In 2.0 there were options for fluid header or footer. Easy hooks will be back eventually, but Easy hooks are essentially the same thing as hooks. They just allowed you not to get into the file to add php/html code.

  2. I used 2.0 to make a fluid header. Does this mean that when I upgrade, my fluid header won’t be fluid any longer?

    Would it be better to wait for this functionality before I upgrade?

  3. Ok great, i would like to create my site with a custom header and footer, a little bigger than what you guys got there, but how do i go about doing that? i heard you mentioned i need a child theme, where do i get a child theme from and how do i install it?

  4. Ok great, i would like to create my site with a custom header and footer, a little bigger than what you guys got there, but how do i go about doing that? in terms of the css script to make the header and footer bigger?

  5. Can anybody tell me why im getting the below error when i try to upload my child theme?

    I have followed coreys example of creating a child theme when i uploaded it and activated it i got the below error message when i open visual editor

    Warning: Cannot modify header information – headers already sent by (output started at /home/deecos/public_html/wp-content/themes/Child Theme/functions.php:5) in /home/deecos/public_html/wp-includes/pluggable.php on line 866

    I created four files,

    1 is HTML folder with a index.html file in

    2 is a Custom.css file which is empty

    3 is a function.php file which has

    4 is a Style.css file which has below information


    THEME NAME: Headway Themes Child Theme


    VERSION: 1.0

    AUTHOR: Darren Jones

    AUTHOR URI: */ @import url(custom.css); DESCRIPTION:Theme with Header and Footer


    What is going wrong? I have even lost the image on my homepage which before installing the child theme was there…. have i written the information wrong?


    • @deecos@import I would suggest you post up your issues on the forums as the blog is not the place to get the support you need. Headway Team and community is on the forum there to help.

  6. Hey AJ,

    This code for the header and footer works just as you showed in the video, thanks for that. How would I go about putting some html in this header and footer?

  7. Thanks for your help! What I am trying to do it add a fluid navigation bar and I’m somewhat clueless about coding. I bought the theme not realizing how much coding would actually be involved. I’m pretty good with getting it to work when the code is in front of me though. 
    Is there a way to use this same technique to make the navigation menu fluid? It’s at the top of my site:
    Thank you!

    • @JoyfulRoots Hi JoyfulRoots.  Did you ever find a solution to your fluid navigation bar issue?
      By the looks of your site, I’m guessing you did ( unless you opted not to use Headway).
      I’m dealing with the same problem and have dug around everywhere and can not figure out how to do it.  Do you have any tips or suggestions?
      Thanks for reading!

  8. This is helpful to know fluid is possible.  And yet, I’m stuck because I want a fluid 3 column widgetized footer.  I used blocks to create the 3 color footer but your videos makes it look like I can’t do that, and that I I have to use your method and add the columns with HTML and CSS somewhere, is that correct?
    If so, is there a video or tutorial to show me how please?
    My website is fluent and I want the red to extend like the purple and lose the white space in between.  I tried reducing margins (even going -5px) and that still shows up.  Any help would be greatly appreciated : )

  9. You actually make it seem so easy with your presentation
    but I find this matter to be really something which I think I
    would never understand. It seems too complex and very broad
    for me. I’m looking forward for your next post, I’ll try to get the hang of it!

Leave a Reply to AJMorris Cancel reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress