Title: Decrease header and footer height Last modified: December 4, 2018 --- # Decrease header and footer height * [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/) * Hello all, * is there a way to decrease the header and footer height? I have been playing with the style.css, but did not make it. I would need the heights as small as possible. Can anyone help? * Thanks for your suggestions. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/decrease-header-and-footer-height/page/2/?output_format=md) [→](https://wordpress.org/support/topic/decrease-header-and-footer-height/page/2/?output_format=md) * [lizkarkoski](https://wordpress.org/support/users/lizkarkoski/) * (@lizkarkoski) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10946373) * Hi – * Typically this can be done with CSS changes. Do you mind sharing your site URL with me here so I can take a closer look at it? * Thread Starter [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10946554) * Hi The sight doesn´t exist yet, I have a local WAMP server. What shall we do? Can I send you an email with the home page? * Thread Starter [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10949335) * [@lizkarkoski](https://wordpress.org/support/users/lizkarkoski/) Could you please feedback? * [lizkarkoski](https://wordpress.org/support/users/lizkarkoski/) * (@lizkarkoski) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10950667) * Would it be helpful to share an example of what CSS can do on this theme? It’s just hard to know for certain it will work on your site too with out looking at it directly. * Thread Starter [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10952214) * Yes, I´d appreciate your suggestion of CSS and understand that you need to see the site. I´d like to give you the URL, but I can´t, because I am in the first stage of building the site off-line, there is no URL yet. Therefore I proposed to email you the home page (html, screenshot, …). * [Fotis Stathopoulos](https://wordpress.org/support/users/fstat/) * (@fstat) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10953970) * Hi there, * The following CSS code should do the trick: * ``` @media screen and (min-width: 896px) { /* Decrease Header Height */ .sticky-header .site-content { padding-top: 55px !important; } .site-branding, .main-navigation { margin-top: 0.5em; } .site-header { padding-bottom: 0.5em; } /* Decrease Footer Height */ .site-footer { padding-bottom: 0.5em; padding-top: 0.5em; } } ``` * Adjust the values according to your liking and let me know if you need more help with that. * Thread Starter [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10954472) * Many thanks, the header and the footer have the right heights now, exactly what I wished for. I´d need more help though. 1. Header: When scrolling up (text moves up), or when clicking on the navigation menu, the header expands down ( by approx. 5mm). Is there a trick to stop the header expanding, to keep the height constant? 2. Footer: Is the small footer height possible even if the page is empty? * [Fotis Stathopoulos](https://wordpress.org/support/users/fstat/) * (@fstat) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10959607) * > 1. Header: When scrolling up (text moves up), or when clicking on the navigation > menu, the header expands down (by approx. 5mm). Is there a trick to stop the > header expanding, to keep the height constant? * This behavior is built-in into the theme and cannot be adjusted with CSS. * > 2. Footer: Is the small footer height possible even if the page is empty? * For that, you’ll have to adjust the width of your site’s main content area. If you do, that will affect pages with content and either make them squished or the contents will be cut off. * Thread Starter [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10963524) * Thanks a lot for all the support. * [Fotis Stathopoulos](https://wordpress.org/support/users/fstat/) * (@fstat) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10968109) * You’re welcome 🙂 * Thread Starter [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10970492) * [@fstat](https://wordpress.org/support/users/fstat/) I am back with the header topic, hope you do not mind 🙂 When clicking on the menu, the header keeps expanding most of the times, but sometimes it doesn´t. Can this be made consistent, either always expanding or not expanding at all? * [Fotis Stathopoulos](https://wordpress.org/support/users/fstat/) * (@fstat) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10973459) * I ran a test on one of my demo sites and couldn’t replicate it. I only used the CSS code I provided you. Can you please send me a screenshot or even better a screencast (short video) of what you’re describing so I can better evaluate it? * For screenshots, you can use [https://snag.gy/](https://snag.gy/) and for screencasts [http://recordit.co/](http://recordit.co/) * Thread Starter [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10978550) * The video: [https://drive.google.com/file/d/13InfRr2vUC9_p_B3f-FfNOpZN2a96nQI/view?usp=sharing](https://drive.google.com/file/d/13InfRr2vUC9_p_B3f-FfNOpZN2a96nQI/view?usp=sharing) * I tested the site with your CSS only and than I added all my custom CSS that I am using with the theme, there was no difference in behavior of the header. * [lizkarkoski](https://wordpress.org/support/users/lizkarkoski/) * (@lizkarkoski) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10981292) * Odd. So there’s something on your set up, that’s different from ours, and is probably running interference. We need to try and figure out what is causing the issue. * – Do you have any browser extensions enabled? – browser type and version? have you tried a different one? – clear site and browser cache (could be holding on to the outdated codes) * Thread Starter [arbois](https://wordpress.org/support/users/arbois/) * (@arbois) * [7 years, 6 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/#post-10983296) * Yes, I have tested different browsers, all without extensions, the header kept expanding erratically in all of them. No change after clearing the cache in the browsers. After clearing the site cache the header stopped expanding in Firefox, for a while though, than it reappeared. * Video (all browsers): [https://drive.google.com/file/d/1tChq8M8ExRIpszYf0yJmRdWjvkpRkJfn/view?usp=sharing](https://drive.google.com/file/d/1tChq8M8ExRIpszYf0yJmRdWjvkpRkJfn/view?usp=sharing) * Tested browser versions, Win10: Chrome 70.0.3538.110 Firefox Quantum 63.0.3 Edge 42.17134.1.0, HTML 17.17134 Opera 57.0.3098.76 Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/decrease-header-and-footer-height/page/2/?output_format=md) [→](https://wordpress.org/support/topic/decrease-header-and-footer-height/page/2/?output_format=md) The topic ‘Decrease header and footer height’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/shoreditch/1.2.2/screenshot.png) * Shoreditch * [Support Threads](https://wordpress.org/support/theme/shoreditch/) * [Active Topics](https://wordpress.org/support/theme/shoreditch/active/) * [Unresolved Topics](https://wordpress.org/support/theme/shoreditch/unresolved/) * [Reviews](https://wordpress.org/support/theme/shoreditch/reviews/) ## Tags * [footer](https://wordpress.org/support/topic-tag/footer/) * [header](https://wordpress.org/support/topic-tag/header/) * 16 replies * 3 participants * Last reply from: [arbois](https://wordpress.org/support/users/arbois/) * Last activity: [7 years, 5 months ago](https://wordpress.org/support/topic/decrease-header-and-footer-height/page/2/#post-11047538) * Status: not resolved