[Resolved] Bad Displaying of header and footer

[Helmut]

Header and footer are displayed in a strange way on my site, when not using Elementor canvas template. On that page, header and footer are inserted through the appearence>widgets>header resp. footer with an element from my Elementor library. On other pages, where I use Elementor canvas page template, everything is fine, using the same Elementor library elements. The page with the problem is: https://agenda21-ush.de/testseite/
Header and footer are displayed correctly on most other side, f.a.: https://agenda21-ush.de/

Problem Header: It shows only the right half. With the inspector I can see, the (div class=”header-widget”) has the css:
.header-widget {
float:right;
max-width:50%;
overflow:hidden;
}
Why max-width 50%?
Funny effect: The top-menu is sticky. When sticky menu appears, it shows full width.

Problem Footer: It has a dark background (including “© 2018 • GeneratePress”, I didn’t define. How can I get rid of that background?

[Leo]

Hi there,

Header widget area is not meant to insert the entire header with the navigation and everything which is why the maximum is 50%.

Can you try using a hook to insert that?
https://docs.generatepress.com/article/hooks-overview/
http://demo.generatepress.com/hook-locations/

[Helmut]

Thank you! Works great! But:
1. In the Elementor library element I have inserted a negative margin, in order to lift that block to the very top (10px). But in this case there is still a gap. Do I need to insert CSS to get rid of that?
2. The black footer with the “© 2018 • GeneratePress” remains. I haven’t found any setting in the customizer to get rid of that. How do I have to do it? Finding the class and “display: none;”?

[Helmut]

I fixed the footer issue with custom css, not the header issue.

[Leo]

I’m not seeing any gaps on top now: http://www.screencast.com/t/O86IDImeGsT

From what I can tell everything is coming from Elementor now.

Let me know if I’m missing something.

[Helmut]

There still is a gap on https://agenda21-ush.de/testseite/ compared to https://agenda21-ush.de/.

[Leo]

Can you explain what you meant by gap?

I see the header and content on that page, both have header padding and content padding:
https://docs.generatepress.com/article/header-padding/
https://docs.generatepress.com/article/content-padding/

[Helmut]

If you look at the 2 different links. The header has a light green background. On one link is a white appr. 10px gap on top of the header. That white gap shouldn’t be there.

[Tom]

Try setting the header top padding to 0 in “Customize > Layout > Header”.

[Helmut]

In the customizer I don’t see a settings for paading-top. I do have activated the header options. Or should I put it in Simple CSS? (In the meantime I’ve upgraded to 1.6)

Edit: Ok, it’s the spacing option I had to activate. Now it’s solved. Thank you.

[Leo]

Glad we could help!

[Author]

Posts