Phil Dias

Can you please send the program file rsd so I can learn how this grid works

Kind regards

Which part of the grid are you referring to? Regards Phil

Phil Dias

The whole project in the program file (rsd file) so I can learn how it works
Kind regards
Stephane

10 out of 10 for persistence Stefke

Hi STEFKE. Unfortunately, it's not something I can do. I have spent an incredible amount of time getting my website to where it is now. Many hours learning about html CSS and JavaScript, reading articles, watching videos and tutorials on YouTube away from CoffeeCup site Designer, even subscribed to Codecademy to try and better my amateur skills. CSS grid is very new to alot of us and to understand that took time and I work 6 days a week and have a young family so to give away my project that I am proud of as my first Responsive design and have spent as I have said soooo much time and energy in would feel wrong and slightly insulting to me.
As others have done, I am happy to give advice and help with little things and understanding isdues but to basically create a full working site for free, sorry no.
I am not sure having a full project would necessarily help you create a site for yourself. In my opinion you need to do it and work with the challenges you face to really understand the design.
Kind regards Phil

Great job Phil, you have great creative website design skills.

I know I supplied a bit of code for the burgerx icon. I found a small bug where the code can get tricked though by a window resize action and the icon will get out of sync so you can end up with a cross when the menu is collapsed. I think this is caused by Foundation collapsing the menu if it goes past the breakpoint set. Since we are changing the icon "onclick" it never recieves a signal the menu collapsed which then leave the cross icon applied.

I solved this issue by adding a small bit of code to check for a class thats added on a opened menu and if the window is larger than a certain size. You will need to add the data-toggler attribute to the #sub-nav and set the value to .expanded. Then replace the script for the burgerx with the new one I have pasted in the footer. Now if the screen (like on a Ipad) is rotated when the menu was opened on the smaller screen when its rotated back the menu will be closed (like usual) but the icon will toggle back to menu7.

Let me know if you have questions but I used one of your early Foundation menu examples you had posted to update the changes so you could see.

Hi Twinstream. Thank you for your kind comments.
I've just had a look and turned my phone and see what you mean.
I'll try and work it out but I have done a lot of work in a html editor so a lot of changes are without the SD3 program so am reluctant to go into the SD3 program again. Is it a case of adding the toggler attribute to the sub-nav ID and replacing the script?
Regards Phil

Yes, that about it.





I do not know what your breakpoint is for mobile to desktop so you may have to change the bold setting in the script.

Brilliant, I will make a copy and try it out on a test site. On foundation I believe the change to tablet screen is 640px so am I right in thinking I just need to leave it as the 640. Kind regards, Phil

Works an absolute treat Twinstream. Thank you for sharing as would never have noticed. Very easy to edit now in atom.io too so thank you. Regards