Gap between header and menu in mobile view

Hi there,

I don’t see this at all. There’s only a 20-25px whitespace between the 2 of them.

Are you able to inspect this issue via the browser?

Guido

Hi Guido,

The 20-25px white space is the gap I was referring to.

When I inspect it, I can see that .header-image has margins of 0 0 20px. Reducing the 20px to 0 closes most of the gap, but an obvious white space of around 5px still remains between the header image and the menu bar, whereas on the desktop view there is no gap.

Can you suggest the best way to “push” the header image down to close this gap? My CSS-fu is not yet strong ??

Cheers

Hi,

Aha, I understand now.

I’m almost certain this is caused by the line-height of the header.

You can solve this with this:

@media screen and (max-width:767px) { 
	header-img {vertical-align:bottom;}
}

If this doesn’t work, try this (not so clean) fix:

@media screen and (max-width:767px) { 
	.header-img {margin:0 0 -6px;}
}

Guido

• This reply was modified 6 years, 7 months ago by Guido.

Have updated theme today and the 5px gap is gone.

Turned out it was the display property of the image. It was solved by adding display:block;.

Guido

Hi Guido,

Inevitably, it was the “not so clean” fix that fixed it!

Cheers