Negative margin overlapping link

Matt Meade

unread,

Dec 18, 2014, 7:04:05 PM12/18/14

to WPGR

Anyone know a good html/css solution to this? I'm working on a WordPress plugin, a widget that displays a menu as interlocking hexagons. The bottom portion of each link is unclickable where the negative margin is covering it with the row beneath.

Any ideas?

http://www.sitebeyondsight.com/responsive-hexagon-menu-plugin/

Steve Colthorp

unread,

Dec 19, 2014, 9:46:54 AM12/19/14

to wp...@googlegroups.com, Bob Orchard

Seems like Bob Orchard dealt with similar issues last year at Givecamp for the site redev project he headed up... He's CC:ed.

Steve C.

3Cstudio

--
You received this message because you are subscribed to the Google Groups "WordPress Grand Rapids (WPGR)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wpgr+uns...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Bob Orchard

unread,

Dec 19, 2014, 5:02:45 PM12/19/14

to wp...@googlegroups.com, b...@tinypint.com

Steve,

Thanks for looping me in on this.

Matt,

The site we did this on is http://drcwm.org. We had to use CSS to rotate and then rotate back for the shapes, making them properly clickable. We also configured it to function like a masonry photo gallery (like Pinterest) where they stack all together.

Take a look at that and let me know if that helps point you in the right direction.

- Bob

Matt Meade

unread,

Dec 20, 2014, 2:01:03 PM12/20/14

to WPGR

Thanks, I hope when I have a chance to dig into the code it helps! :-)

I may still be screwed though because yours are still square like a box model and don't require any invisible bits hanging out like my stupid hexagons. :-(

Bob Orchard

unread,

Dec 20, 2014, 4:58:21 PM12/20/14

to wp...@googlegroups.com

Matt,

Take a look on over at http://jtauber.github.io/articles/css-hexagon.html for creating them in CSS. It's similar to how I did the diamonds and should cut your overlap because you're drawing the shape itself, so there shouldn't be anything fighting each other.

Bob Orchard
Tinypint, Inc. // (616) 536.8283 // http://tinypint.com

You received this message because you are subscribed to a topic in the Google Groups "WordPress Grand Rapids (WPGR)" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/wpgr/Qi0FSyVxHFQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to wpgr+uns...@googlegroups.com.

Matt Meade

unread,

Dec 20, 2014, 5:15:59 PM12/20/14

to WPGR

Saw that first but couldn't go in that direction as I'm outputting post thumbnails inside the hex (so it can't be made of borders), has to hold content.

http://www.sitebeyondsight.com/responsive-hexagon-menu-plugin/

Reply all

Reply to author

Forward