Decrease header and footer height

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?

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?

@lizkarkoski
Could you please feedback?

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.

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, …).

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.

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?

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.

Thanks a lot for all the support.

You’re welcome ??

@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?

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/ and for screencasts https://recordit.co/

The video:
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.

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)

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

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