[Resolved] Responsive menu and header / logo

[Ingrid Wildschut]

When i put a header logo (image) above the menu the image will be smaller when looking on a phone. But we get a lot of space between menu and the image.
What can I do to make the space smaller.

www.http://nanettevandersnoek.com/

I have now put a pageheader above every page. But the problem you will see with the blog.

[Tom]

Are you talking about that little space below the header?

That space is your “Separating” space which you set in the Spacing add-on.

You can set your “Content Layout” to “One Container” in the “Layout” section of the Customizer which will remove these spaces.

If you only want to remove the space below the header, you can use this CSS:

.separate-containers .site-main {
      margin-top: 0;
}

Let me know if that helps or not 🙂

[Ingrid Wildschut]

I think that I didn’t explane correctly. One the computer is just fine. If you look on the page with a mobile the space between the header and the menu is a lot bigger than on the computer.
You can see it on this page with your mobile.

If I use the pageheader, the menu will be above the header and not below of the header it works just fine. But I want the menu below the header.

http://nanettevandersnoek.com/category/blog/ (de page with the space between the header en menu on the mobile

http://www.nanettevandersnoek.com (the page with a page header.

I hope that I explaine me better.
Sorry for my English.

[Tom]

Ahh I see! You’re adding your header as a header background, and then adding padding to give the header height.

Instead of that, go to the Customizer and open the “Header Content” section – then upload your header/logo through there.

Then you can remove the padding and background image, and the header will look good on desktop and mobile.

Let me know 🙂

[Ingrid Wildschut]

That great it’s working.

[Tom]

Awesome 🙂

[Author]

Posts