I suspect half if not all the problem here is my misusing PopDrop Menu, but in this instance, where I’ve recreated the Foundry overlay menu system (but using stacks that actually allow some customisation!) I can’t get the close icon to appear.
http://ci-clientservices.com/clientdev/gallery/
Click the menu icon top right.
Where am I going wrong? (Regards this project, not life in general).
I’m on my mobile so can’t look but it isn’t a color issue is it? Because it seems to close just fine where the Close icon ought to be
Edit: Nevermind, it closes when you click anywhere.
Tapping anywhere closes the popdrop. That’s fine, but I’d like the close icon to appear, just for stupid people ;-)
Bound to be a z-index problem. It’s there but something is a layer on top of it.
As always, start removing stuff or making BG’s transparent and you will see it.
Also there is a gallery error on that page so it would probably be worth fixing that too.
You haven’t added a close element into your modal. If you want the original pop drop launcher icon to show through then it is going to need to be fixed position.
Having it static position means that it could scroll anywhere up and down with the page so it makes no sense to use it as a close.
Ok, I just clicked Fixed position in the PD Menu setting and it’s disappeared off the right of the screen, and still not appearing in modal.
I know I’m being thick, and I’m sorry, but I’m horribly hungover and my brain is not functioning.
:-)
Edit: Ok, I’ve worked out I don’t want the icon fixed, so how do I add a close icon to the modal?
Edit edit: Worked it out. But it’s not really working as hoped, so for now I’m happy to have the modal close on any click!
This is only a mess about project anyway!
What you need is my new Dignitas stack.
Failing that, if you insist on existence then just float a close icon in the modal. The easiest way is use a full height section and then use section fix to put an icon top right - you could use a ButtonPlus 2 in icon mode or just a text stack with a FA icon in it.
You can make anything close its parent pop drop by adding the data-popdrop-close attribute - which of course is easy in button plus
Yes, Dignitas seems a good option.
I can’t do this anymore. I’m too fucking old for weekends on the lash.
PS - Personally I would make a nice SVG close and float it in a Blueprint SVG just because I hate fa-times.
I had a graphic designer contact me in the week for a site, just wanted more or less what’s on that page: Some galleries in a block.
Long story short I don’t think what he wants is possible with RW but as I had a gallery system I’d already made (PosterGallery) I said if I had some spare time I’d look at throwing something together for him.
I don’t for one moment think he’s going to go with this, but as I’m incapable of doing anything else today, I figured I’d have a play.
If you does go for it, I’ll look into the close icon thingie some more.
Hugely oversimplified and not styled but it shows it in principle. You could put a nice gradient grey BG on the section and make it pretty.
Thank you.
That fa times is stylish.
Out of curiosity, would using LL be the better option? That nice animated open and close “BWD” icon thingie you use, is that an SVG?
I do like the Foundry Overlay Menu stack that I’ve tried to replicate here, it’d be nice to actually put together a little setup with LL to use in some other instances instead of the Foundry stack, as it doesn’t have nearly enough syling options.
Which one? The one on the BWD site is a CSS icon animation, the same as in PopMenu which is robbed from MenuLab which is in turn robbed from Facet (which is now a part of menu lab).
There is also the animated SVG on in PopMenu which is just robbed from MenuLab
Obviously the best solution would be to use the menu lab overlay menu or Facet which were actually designed for the job and predate all the cheap imitations that have come since. I stand proudly alone on my mountain of nonchalance safe in the knowledge that I don’t need to release it to buy seeds and nuts.
I’ve bodged summit together using the SP and a BP with an “x” for the close.
Last question… When you click the menu hamburger a little grey border appears on the left of the icon, is there a way to get rid of it?
This is what I’m talking about.
I’ve tried adding the usual .button:focus {outline:0;} (and tried with the class duck-burger too), but it’s not working.
Ingore: Found it- .pd-switch-wrap:focus {outline:0;}