Archived topic
Bad Displaying of header and footer
10 replies · Started by Helmut on March 21, 2018
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?
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/
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;"?
I fixed the footer issue with custom css, not the header issue.
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.
There still is a gap on https://agenda21-ush.de/testseite/ compared to https://agenda21-ush.de/.
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/
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.
Try setting the header top padding to 0 in "Customize > Layout > Header".
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.
Glad we could help!
