[Resolved] Issues with editing the elementor header after merging transparent GP menu

[Rafael]

Hi there,

I am having lots of issues with the creation of a transparent header.

I got GP pro and I am working with elementor. I created a header with elementor, upload the background image for it, and used the Advanced Page Header options in the homepage for merge the GP menu with the elementor header.

You can see the result here: http://ugly-bird.w3.poopy.life/

The thing is that I cannot edit the background image of that header with elementor. I realized that in some cases I needed to unselect the “Merge with site header” option to be able to edit using elementor, but this time, I don’t know why, I unselect that option and the header remains the same, merged and transparent.

Can you give me any advice? I don’t know what to do.

Thanks

[Leo]

Hi there,

Not sure what you mean?

I can see that this background image is currently added using Elementor so you should be able to edit it within the plugin: http://ugly-bird.w3.poopy.life/wp-content/uploads/2017/08/cover-2.jpg

If not their support should be able to point you to the right direction.

[Rafael]

Hi Leo,

thanks for replying but the issue is actually from the theme. When I use the GP “Merge with site header” option the elementor header is placed under the main menu and It is no possible to edit the elementor header (placed at the top of that) because that edit option from elementor dissappears when the mouse is getting closer to the header.

Let me explain it in a quick video better: (I duplicated the module and the image for you to see what happens with both edit options from elementor front end panel):
https://www.useloom.com/share/def8299799e645d5810d0385adb750f8

There you can see how the options from the header dissapeared when I get closer with my mouse.

Thanks again

[Leo]

Ahh I see.

Try Lyle’s CSS solution here: https://generatepress.com/forums/topic/cant-reach-the-section-and-paragraph-buttons-on-an-elementor-section/#post-305133

[Lyle]

Hi Rafael and Leo,

Leo – thanks for suggesting the CSS but you may want to reference this post in the future (for now, anyway). The CSS has changed since that post with the release of Elementor 1.5 and up.

I have posted a Quick Tip with the updated CSS. Note that there are two blocks of CSS; one at the top of the page, the other at the bottom. It is the bottom block that contains the CSS to move the Section controls into the bounding box and the top block makes the controls behave like “in the good old days”, i.e. before E 1.5 🙂

http://snifflevalve.com/quick-tips/elementor/enhance-display-of-editor-items-in-elementor-1-5/

Cheers!
Lyle

[Leo]

Thanks Lyle. I have bookmarked the link 🙂

[Rafael]

Thanks Lyle for the tip.

Unfortunately after applying that CSS the main issue is not solved yet. When I try to select the elementor header editor is still disappearing as the GP menu is over it, see the behaviour in the quick video:
https://www.useloom.com/share/ca948bdffa4f4e00a95e27c279aa47e4

Just thinking, is there a possibility to change elementor position from the top to the bottom of the element? Just a suggestion.

If anybody else finds another solution I would be appreciated.

Thanks.

[David]

I have used this code before to push the Section UI to the bottom of the section.

.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-section-settings {
    top: 100%;
}

Just so as to not get confused with what section the UI belongs to then reduce the Top % a little so it actually sits inside the container.

[Rafael]

Wow David, thank you so much!!!

This solution resolves totally what I was looking for.

Thanks, thanks, thanks!!! 🙂

[David]

Your welcome. Kudos to Lyle for his original posts on making the UI more accommodating. I just tweaked it.

[Leo]

Thanks David 🙂

[Author]

Posts