Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Merged Header Elementor

Home Forums Support Merged Header Elementor

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #370333
    David
    Staff
    Customer Support

    Hi Tom

    a few people have commented on El forums that a merged heaader using Elementor is causing editing issues, as reported here a couple of times and the no pointer event CSS doesnt seem to be working since recent updates. A couple of workarounds i have given are to:

    Hide the header in Elementor Editor (Astra theme seems to have added this as a function):

    .elementor-editor-active .generate-merged-header .site-header {
        display: none;
    }

    Or to add margin to the elementor section container:

    .elementor-edit-mode .elementor-section-wrap {
        margin-top: 300px;
    }

    Maybe a JQuery to work out the height of the header to auto fix.

    I know this is an Elementor thing (and doesnt really affect me as why would i want to not use GP headers) and something they should be looking to fix but might be worth considering as part of a page-builder function as the issue seems quite common place.

    GeneratePress 1.4
    GP Premium 1.4.3
    #370523
    Tom
    Lead Developer
    Lead Developer

    Ugh, I’m not a fan of adding patches to the theme that handle specific plugins, however this one seems necessary.

    Is there any way you/Lyle can set me up with a page where the problem is present (with login details)? I’ll take a look at the possible fixes, and see if I can find something better.

    Thank you!

    #370545
    David
    Staff
    Customer Support

    Lyle is on the case =)

    #371089
    Annie

    Hi David and Tom,

    Thanks for pointing this out and looking into this!

    I am one of the users reporting this, and I see Davids statement that this is only an Elementor thing and that this is not happening when a GP header is used. However, it is happening when I use a GP header.

    If I do not add that css and have a GP created header set to merge header en come over content, I can no longer crab the edit button. I need to first disable the “merge header” save, then I can edit, then save, then set to merge header again.

    I made a short video showing what I do and when it happens:
    https://youtu.be/gwXQqAjJgE8

    For now I have two sites build with GP premium and it is happening in both:
    https://logologics.nl/budget-website-sport/sportief/
    https://logologics.nl/

    I am also testing OceanWP and the same thing is happening there if I set the “transparent header” feature so the header and menu overlap the page content. Nic says its a theme thing, not Elementor.

    If you would like to have credentials of this test site, let me know Tom!

    Annie

    #371123
    Annie

    Ok, Davids words made me think and test more here:
    https://logologics.nl/budget-website-sport/test-gp-header/

    Here I completely used all features of GP header ( adding its own image, colors, menu colors, padding etc and then there is no issue with grabing the upper section! I suppose that is what you ment to say David?

    However the downsite of using the GP header this way is, we can not use one large image as a backgrund that covers all other content on that page like here: https://logologics.nl/budget-website-sport/

    Setting the GP’s header own image, can only contain some content that needs to be added and styled in html, which for non techies like clients, is not really appealing to them, and won’t cover the whole page content, which is very popular these days.

    Hope this clarifies it even more?

    Annie

    #371139
    David
    Staff
    Customer Support

    Hi Annie,

    that is sort of correct. What i meant is that I generally dont use Elementor (at all) to create my headers, just GP so the issue doesn’t affect me personally – and i have a few CSS tricks to fix Elementor if i do =)

    Things to think about and make you smile:

    GP headers can contain anything including Elementor template shortcodes. So create your custom headers in GP, add a Elementor template and apply that header to whatever page or page/post type. Then the client can just edit the Elementor template. You can even use the GP Template Tags in some of the Elementor Widgets so titles etc are dynamic – one header multiple pages. How about a merged parallax header with dynamic content and maybe an Elementor CTA or sign-up in place? So cool…..

    GP headers even merged are part of the body so a body background image can still be applied with a GP header in place.

    Food for thought

    #371239
    Annie

    Hi David,

    Indeed food for thought!

    That smile on my face is about to break through haha.
    So far playing with Elementor free version, so the shortcodes may be something to consider. The possibilities I discovered so far ( been testing for about 10 days now with Elementor, GP premium and comparing the OceanWp as well ) are awesome.

    Correct, adding an image into simple CSS per page with:

    body {
        background-image: url( 'https://logologics.nl/budget-website-sport/wp-content/uploads/2017/07/gymnast-646466_1920.jpg' );
    }

    actually works with the custom header too, thought this would only work if I only followed this:
    https://docs.generatepress.com/article/merging-header-navigation-content/

    Haven’t thought of that, thanks!

    Annie

    #371310
    Tom
    Lead Developer
    Lead Developer

    I’ve added this to the next version of GPP:

    .elementor-editor-active .generate-combined-header {
        margin-top: 50px;
    }

    It should fix the issue 🙂

    #371355
    David
    Staff
    Customer Support

    Hi Tom,

    i understand the logic of moving the header down enough so the EL section UI sits above it but it doesn’t work. You would need more than 50px because the EL section UI is on a hover state and there isnt enough of the section at the top for you to hover over for it to appear. They should really have onclick state for this so the UI states active….. but hey.

    Also on blank pages the Add Section button sits behind the header so you can’t even add the first section.

    Personally I think your better off hiding the header or moving the Elementor container down out of the way. Or is there anyway of nulling the header element so it doesnt get in the way…. hmmm

    Sorry to be the bearer of bad news – it’s one more of the reasons i have reverted to working without EL. They should really work better with the theme developers to incorporate a working solution. Maybe it’s time to have a chat with them…..

    #371367
    Tom
    Lead Developer
    Lead Developer

    Hmm, it worked in all my testing. Can you set up an example for me where it’s not working?

    #371376
    David
    Staff
    Customer Support

    Just added you to the devsite.

    #371377
    Tom
    Lead Developer
    Lead Developer

    You had paragraphs added to the page header, which was adding extra space.

    Try now that I removed paragraphs.

    Removing the header would work, but is less than ideal, as it doesn’t give the user a true preview of what things will look like.

    #371395
    David
    Staff
    Customer Support

    Aaah yes – apologies. There are still issues with this method. Check now – i have added a nested section to create columns, which would be very common – this introduces another section UI that cant be reached. It’s also impossible to add or edit any elements that are obstructed by the header.

    Ready for the flaming on this one – could you jquery the header to hide when the elementor section is hovered over?

    #371396
    David
    Staff
    Customer Support

    I suppose the work-around is that you would have to move the section down to edit and put it back in its place. Not ideal though.

    #371464
    Tom
    Lead Developer
    Lead Developer

    Here’s our solution:

    .elementor-editor-active .generate-combined-header {
        pointer-events: none;
    }
Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.