Solved: How to reduce the height of header and footer with...

mkchristie · ‎07-06-2017

I need to know how to reduce the height of the header and footer. The theme I am using is Edison - Business.

Web site: http://www.christievo.com/

I am not new to creating web pages, but I am new to Weebly.

Thanks,

Mike

trhacker · ‎08-04-2019

I found this for the header:

Go to Theme > Edit HTML/CSS

Choose the header.html

Insert a new line after <body class="header-page">

Paste in the following code:

The padding is what controls the header bar. Even with 0, header content will show, but it will overlap the background of your main page section. If you want the actual bar to show, increase the size of this padding (for example, 30 gives you approximately a 0.5" header bar), and adjust from there.

View Best Answer >

Queso · ‎07-06-2017

Hey there! You'll want to click the area of the header, then click and drag the blue bar at the bottom. That should let you resize the header and sections freely.

mkchristie · ‎07-07-2017

I tried that. It works to an extent, but I want to make the header more narrow than that process allows. It will not let me shrink it beyond a certain point.

Queso · ‎07-07-2017

What is the effect you're looking to create? We may be able to find a solution for you here.

mkchristie · ‎07-09-2017

I'm simply trying to reduce the amount of white space between the bottom of the header text and the body of the page.

Adam7 · ‎07-10-2017

You'll probaby need to do that via CSS changes. Are you familiar with CSS, @mkchristie?

mkchristie · ‎07-11-2017

Yes, I am familiar with CSS. Can you give me a pointer as to where to change the code?

Adam7 · ‎07-11-2017

I'd recommend looking at your page source to see what classes are used, so you can then search in the CSS files of your theme for what to change or add.

3 Kudos · ‎06-22-2018

Thats a super lame Idiotic response to a specific question that LOTS of Weebly users have Adam

octech · ‎07-24-2018

any updates on this? really would love to change the default header size. as has been said, dragging the blue bar only goes so far. PLEASE provide the precise location.

thenatjar · ‎08-29-2018

I too am looking for a better answer to this. Adam or someone, can you please pick this back up to close the loop? That would be helpful. Thanks!

trhacker · ‎08-04-2019

I found this for the header:

Go to Theme > Edit HTML/CSS

Choose the header.html

Insert a new line after <body class="header-page">

Paste in the following code:

The padding is what controls the header bar. Even with 0, header content will show, but it will overlap the background of your main page section. If you want the actual bar to show, increase the size of this padding (for example, 30 gives you approximately a 0.5" header bar), and adjust from there.

Eaotero · ‎12-28-2019

THANK YOU THANK YOU THANK YOU! I kept looking for an answer and am so grateful to you for finally getting it right.

supersiber · ‎05-09-2021

Unfortunately, your solution did not work in my case What can be the reason?

Thank you.

How to reduce the height of header and footer with original Weebly editor?

Adjusting Header Height to Lose Empty Space

Reduce the height of my border

Changing Header and Footer Color

how to change from square editor to standard weebl...

Changing Header/Footer Colors