Support » Theme: Cakifo » How to adjust height of header and footer?

  • Resolved tylerbarabas


    I created a child theme called Cakifo-child, and now I want to adjust the height of the header and footer to be a bit smaller.

    I’ve tried both adjusting the parent css file, as well as copying the header section of it to the new child css file and editing that. I’ve tried changing all of the values in the “Layout: header” section, namely in #branding, #site-title, and .flexbox. Changing these values seems to have no effect on the way the browser displays the page.

    Any help?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Moderator t-p


    – Try using, for example, a tool like Firefox with the Firebug add-on for this kind of CSS work. . Help info on Firebug
    – Newer IE and Chrome also have similar tools
    – Also, check this plugin:


    Try this:

    // default values - increase or decrease them
    #branding {
       padding-top: 60px
       padding-bottom: 50px;
    #footer {
       padding-top: 40px
       padding-bottom: 40px;

    Hope that helps you. If not, feel free to write again.

    If you have any question beside this one, I recommend that you sign-up for Theme support on Theme Hybrid. You’ll find a section called “Cakifo” on the support forum.

    – Jesper

    I put that in to my child theme’s style.css, but changing these values still has no effect. I even tried setting them to extremely high & low values, but no change. Please let me know if you have any other suggestions. This theme is perfect for my needs besides this one tiny adjustment. :/

    Moderator Andrew Nevins


    Front-end developer

    @tylerbarabas, Any chance of linking your site?

    Thanks to Tara for suggesting FireBug. What a great utility!

    Using it I was able to pin down that #branding and #footer are in fact the correct properties to adjust. But I was not able to get any change from editing style.css. Instead I had to edit these properties in the style.min.css in the child theme. I am still pretty unclear as to why there exists a style.css if the browser is reading from style.min.css (which is much tougher for me to read lol). EIther way this seems to work.


    You should not edit style.min.css directly. You should be able to overwrite the styles in your child theme.

    Could you please link to your site?

    Moderator t-p


    Glad you got it resolved 🙂

    Can anyone help me? I need to adjust the header on my theme. It is way too tall and won’t let me set the header all the way across. Please just tell me what code I need to adjust.

    Version 3.6.1

    @vintagegalstyle – please start your own thread – this one is resolved – and you also need to post in the sub-forum specific to the theme you are using.

    This topic is resolved but for (at least) one of the lesser wordpress minds the solution dont stand so clear to me.
    It seems the solution was to edit style.min.css directly but the author of the theme dont not condone this.
    So … what is the right solution then?
    I have tried to overwrite in the style.css file in section .site-header as well as adding a section #branding. Neither of these edits seem to work.

    Edit 1: Changed padding to 10px:
    padding: 10px 0 10px;

    Edit 2: Changed padding-top and -bottom to 1px (just to provoke some action):
    /* Tilføjet #branding */
    #branding {
    padding-top: 1px
    padding-bottom: 1px;

    Site: (currently down at the minute of writing due to the blessings of my provider surftown 🙂 )

    Moderator Andrew Nevins


    Front-end developer

    Sorry, but this thread was written in the context of the original poster’s situation. The original poster created a Child Theme and was familiar with CSS.

    Please try to create your own thread to discuss your own issue, as you can see a solution for one person may not be a solution for another.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to adjust height of header and footer?’ is closed to new replies.