[Resolved] Can't Reach The Section and Paragraph Buttons On An Elementor Section

[v4ncouver]

I can confirm the same issue. 🙁

At first, I assumed that it has something to do with my Wacom tablet (many apps don’t play nice with it) but using Elemenotr with GeneratePress is now downright annoying.

I have a page where Ican NOT mouse over the section icons to delete it.
The weird part is that on some sections it works and on 2 it doesn’t.
I have logged out, cleared the server cache …. nothing works.

I hope someone finds a fix for this … what ever it is.

[Lyle]

To clarify, using Elementor is downright annoying … nothing to do with GP 🙂

That said, perhaps try this updated CSS for use on Elementor 1.5 and up. It enlarges the icons plus returns their behavior to the pre-1.5 state, that is, they are always visible; don’t need to hover the Col and Widget icons.

/* Elementor 1.5 changes the background color and icon size */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-element-settings .elementor-editor-element-setting {
	position: relative;
	z-index: 999;
    background-color: #1e73be;
    font-size: 20px;
}

/* Elementor 1.5 changes the icon container height */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-element-settings {
    height: 30px;
}

/* Change Column and Element icons back to pre-1.5 behavior */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-element-settings .elementor-editor-element-trigger:not(.elementor-active)~.elementor-editor-element-setting { 
    width: 25px !important; 
	font-size: 11px !important;
}

/* Reverse the Element icons order so that it matches the Sections and Columns order */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-element-settings { 
    flex-direction: row !important;
}

Cheers!
Lyle

[v4ncouver]

Thanks for the styles Lyle,
and yes, Elementor is annoying (for a few more days until they update again).

I have found a way to get around the issue if I drag the sections above the one I can not mouse over to another place on the page and then, if I am lucky, I can actually move the mouse cursor over a button and to the magic. Now a new issue has popped up but I’ll let it go for the time being.

[v4ncouver]

Leo!!!!!

After nothing but problems with Elementor 1.5 (copy paste 100% broken when using toggles), i’ve reverted to 1.4 which was easy enough to do.

BUT, all the icons were messed up. I remembered that you posted some CSS styles the other day and want to say a big THANK you. Without your CSS styles, reverting from 1.5.2 is now officially broken as well.

Verdict:
DO NOT use Elementor 1.5.x as they are a long time away from show-time!
I regret upgrading and am not so sure that Elementor is something that business websites should use to begin with.
Elementor locks you in and moving to a more professional page builder means starting over.

Had I known then what I know now ….

[Annie]

Hi,

Since the recent elementor update to version 1.6.5. ( and GP premium update? to 1.4.3. )
The css workaround no longer works and one needs to uncheck the “merge header” all the time to be able to grasp the edit section.

However, I tested and switched back to the previous versions of Elementor and GP premium, and the issue persists, even with the css code in custom css, that worked before.

To be clear first ( before the updates ) this code worked like a charme:
see this topic: https://generatepress.com/forums/topic/transparent-header-for-all-pages/#post-366748

.elementor-editor-active .page-header-content {
    pointer-events: none;
}

I was hoping this code from this topic might work, but unfortunately it does not.
I/we are stuck again with the frustrating issue that we can not edit the upper section if the “merge header” option is turned on.

Is there a fix for this that works again please?

Thanks,
Annie

[Annie]

I just opened a new issue on Github:
https://github.com/pojome/elementor/issues/2223

[Lyle]

Hi Annie,

Try this CSS. It moves the Section icons down into the bounding box.

/* Elementor 1.5 and up - places section icons inside the bounding box */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-section-settings {
    top: 100%;
}

Cheers!
Lyle

[Annie]

Hi Lyle,

Thank you so much for helping me out!

Just before your post I received help in the Elementor FB community and this css code worked:

Place this in the simple css:

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

David Beckwith is letting Tom now about this, but for now, maybe this helps someone else.

Thanks a lot and have a great day!
Annie

[David]

Hi Lyle and Annie,

just to keep things joined up I posted here.

David

[Ezekiel]

Hello Lyle,

I have been having this problem for days, I have looked and tried out different CSS codes but this code you provided:

/* Elementor 1.5 and up – places section icons inside the bounding box */
.elementor-editor-active .elementor.elementor-edit-mode .elementor-editor-section-settings {
top: 100%;
}

to be placed in Simple CSS is the only one that worked for me.

I just want to express my appreciation.

Thank you so much.

Ezekiel.

[Russell]

OK, I’ve tried all the CSS codes listed above and I’m still having problems…

1) even though the elementor edit icons do show up inside the row, when I click on the section icon in the top row, I am unable activate the section area of elementor. In other words, I click and nothing happens

2) things work fine on the 2nd and all other rows

3) I don’t know if the following is related, but 1 & 2 above remain constant regardless if I have “<span> </span>” or “<!– page header –>” in the page’s content section. (It’s been awhile since I’ve worked this area of my website. A few months ago, <span> </span> was suggested and now I see <!– page header –>.

4) I’m using the following versions:
generatepress 1.4
generatepress premium 1.4.3
elementor 1.2.7
elementor pro 1.9.3

I open to any suggestions as to how to get the elementor edit icons functional. I’d like to make some refinements..

oh! agnetic.com is the website

[David]

Hi Russell, do you have a merged header on that page where you can’t reach the top section?

[Russell]

yes

[David]

This is the code that should stop the nav pointer events in the header from interfering with Elementor editor.

.elementor-editor-active .generate-combined-header {
    pointer-events: none;
}

If that is not the problem, then the current workarounds is to remove the header whilst you make the edits and then put it back afterwards.

[Russell]

Thanks David » that worked!

[Author]

Posts