Phil Dias wrote:Thank you for all the advice and pointers.
Here is the finished website minus a few bits like adding Google analytics etc. Let me know what you think?
https://phildias.com
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.
Bootstrap 5 CSS Grid.