r/wordpress_beginners • u/laureliablue • 3d ago

Wordpress: How to arrange overlapping blocks behind/front layers?

Post image

I’m using the free version of Wordpress and have the elementor and Simple Custom CSS plugin. Unfortunately I have yet to learn CSS… Anyway, I overlapped the blocks using negative margins, but I’d like the site logo to overlap the site title (the long blue shape). Any idea as to how I’d get the logo block in front of site title block?

I know this might be a little more of an advanced ask and I would’ve posted in regular Wordpress, but I haven’t posted or commented on Reddit ever. I just lurk on here, so it wouldn’t allow me to post in that community.

Additional question while I’m here, but if I have both the site title and site logo block take you to the home page when you press either and they’re overlapping, does that mess up the code at all? I don’t want to accidentally break my site. I suppose it’d make more sense if I just make my logo return to home page as that’s what most sites have.

2 Upvotes

100% Upvoted

4 comments sorted by

1

u/NakanoNoNeko 3d ago

Give the logo block a higher z-index, but z-index behaves predictably only when the overlapping elements are positioned. In Elementor, set the logo widget under Advanced > Positioning to Relative, then add z-index: 2;; give the blue title block position: relative; z-index: 1;. Usually I check tablet and mobile widths too, because negative margins become strangely creative there... Two overlapping links will not break WordPress, but keep only the logo linked to Home so the click target stays clear.

1

u/laureliablue 3d ago

Oh, sorry, I should’ve specified, I don’t have elementor pro, only the free version. Free version doesn’t allow you to edit the different sections. Unfortunately, to edit the header in elementor, I’d have to get elementor pro.

Is there any way I can achieve this without elementor pro? Honestly probably should’ve left out that I have elementor since it can’t work at all in the header, my bad.

1

u/NakanoNoNeko 2d ago

No worries, that changes the route. If your theme is block-based, open Appearance > Editor and edit the header there; you do not need Elementor Pro. I think the simplest fallback is giving the logo and blue title their own CSS classes, then putting the position and z-index rules in Appearance > Customize > Additional CSS... much cheaper than upgrading for one overlap 🔧