Archived topic
Header widget container width and sticky menu
3 replies · Started by Mildmac SA (ESA78960895) on May 26, 2017
Hello, this is my first query in this forum and I must say that I do not know much about PhP or CSS programming.
I have to reproduce as close as possible a page made with the impreza template and visual composer
(http://new.terraaurea.com) with GeneratePress and Elementor (http://vvv.terraaurea.com).
I have solved almost everything, but the header is giving me problems. On the left side is the logo and on the right I have
included a widget with an elementor section template that has a menu, two buttons and 3 social icons. But it is cut off
and I am not able to move it to the right and see the whole widget. I can´t change the width for that widget container
I have tried to add some CSS lines in the customization, but without success.
Can you please tell me how? Or any other way to reproduce that without using elementor widget for that.
Another issue: sticky menu is working, but I would like the header area with the logo remains too (a bit smaller). Just like
in the original page. Is it possible to do that?
Thank you
Rafael
Hi there,
1. Try this CSS:
.header-widget {
overflow: visible;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
2. Getting the whole header sticky isn't difficult, but getting it to resize on scroll like that would involve some custom javascript.
You could use a plugin like this: https://en-ca.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
And apply it to the .site-header element.
Once you do that, let me know and I'll help with the resizing part.
Hi Tom,
i followed your instructions. Add CSS code lines to CSS aditional section in GPress personalization. Now I can see the whole widget, but in the middle, overlpping the logo. I need to move it to the right. I tried with margin, padding, etc, but it didn´t work.
I installed "sticky-menu-or-anything-on-scroll" and apply to .site-header but it works a little weird. First appears the menu bar and after, below, appears the header. You can check at http://vvv.terraaurea.com/
Thank you in advance
Rafael
That looks like an issue with how the Elementor element is set up - it has a set width of 950px, which is way too wide to fit in that area.
As for the other issue, do this:
Using GP Hooks, do this:
In the "Before Header" area, add this:
<div class="custom-fixed-header">
In the "After Header" area, add this:
</div>
Then target the .custom-fixed-header class in the plugin.
