Webdeersign Project5 now available

Project 5 is now available.

Check out the demo to see the full effect of the masked text animations that create the illusion of a 3D image at Webdeersign RapidProject 5 .

This is a super flexible project suitable for a single page design to a vast multi-page site using it’s MegaMenu which allows total freedom to add whatever you want to the menu.The project requires Foundation Stacks but is crammed full of BWD Sections and the new PopDrop used to add the dropdown and modals.

As always the full Paddy stacks are included.

Available now at http://http://webdeersign.com/projects


Hi, looks good, nice behind the image text effect… the mega menu has a 20px white border on the right is that for design or is there some overflow?

That’s a feature of the PopDrop stack.

Can you show me a screenshot of the white line please. I don’t see it.
If it is a "feature ", it’s not one I’m aware of and I need to sort it out. Thx

this is what shows on the right side when the menu slides down, using chrome browser

It shows up for me as a scroll bar (for when the menu stacks on smaller screens and needs to be scrolled). Not sure if it should be there when the content isnt overflowing though…

Thanks, - yes @jabostick is right I think, its a scroll bar and is dependent on your operating system settings I suspect. I don’t get one in chrome at all on my mac, even with a very small browser window. .

I see it on Safari 9.1.3 and Firefox 49.0.1 on El Cap.

Hmm… It shows up for me on both Safari and Chrome

Change this setting in General prefs and I suspect it will go away - that setting is what makes it not show for me.


Andrew is quite right. I am pretty sure that the default value for that setting used to be “When Scrolling”. I changed mine to “When scrolling” and now it behaves the way it used to. I certainly didn’t change it so not sure why that changed. The browsing experience is much better when set to “When scrolling”. Also the main side scroller bar is the original transparent one.

@tav why does it work fine on your demo page and it shows up on webdeer’s project 5 site? I have not touched those setting so im not sure thats reason

@rolisize What are those settings set to on your computer as a matter of interest?

It may just be the content size difference that causes it to show on @webdeer’s project.

The reason this shows is the way OS’s interpret scroll bars when we have overflow set to scroll .If we set overflow to auto then they will go away (although not in IE) BUT you loose momentum scrolling on iOS which gives a horrible user experience. This is the trade off we have to make and given that the scroll bars only show if the user has told them to do so (or at least the OS has and the user has not altered it) then i personally think that it is better than making iOS scrolling horrible for every user without a choice in the matter.

hi, its on the based on mouse/trackpad setting. Perhaps its something with the amount of content, as far as i know, its the only way to create a mega menu in foundation would like to know what not to do so i don’t have that issue. Hoping that the end user has that option selected in their preference does not seem like the way to go

I’m not aware of the setup in that project but by the same measure I’ve viewed it on 5 different macs with the scroll setting at “mouse/trackpad” and it does not appear. That said there are ways around this using some touch detection javascript rather than using the clean CSS approach. This is never 100% though as users settings can always override these things and are totally beyond the control of the webpage code unless we get into nasty browser hacks which really are not suitable for a general use stack.
BTW ButtonPlus2 will have a mega menu that also transforms into a modal toggle menu so there will be yet another alternative as well.


Your available link doesn’t seem to work.

Link now adjusted. Thanks

@rolisize Andrew has only gone and tweeked PopDrop and I have updated the demo Project5 with the new version. From the testing so far, Andrew’s additional code appears to have completely overcome the peculiar browser behaviour you mentioned for all possible scroll settings a user could have. He is an absolute genius.


Agreed, That he is - and a darn helpful one!


Gary did you mean not to highlight the same as the rest of the dropdown menu items, no highlight to the left of Contact, other menu items highlighted to the left on hover