Hi
Frameworks
This is my humble opinion
- 1/foundation6
is perhaps the most versatile and easy framework to use, IT IS HOVEVER best suited to Mobile First Layout. which a lot of people (even some of the more experienced find it difficult to get their heds around the process, having said that it can be done desktop down, but requires qute a bit of fiddling around when moving down, towards mobile widths. It has 2 breakpoints which are fixed in place cannot be deleted, or moved.
- 2/ Bootstrap 4
once again this one is best suited for mobile first layouts, obviously it has 4 (hence the framework name = bootstrap4) breakpoints which are fixed in place same as foundation6, Bootstrap is perhaps one of the most well know of the frameworks, and has quite a wide range od CSS properties available.
- 3/ Materialize
This is for me the least useable and user friendly of the frameworks, it is also mobile first.
- 4 and 5/Frameworkless
Now this one comes in two options
a/ desktop down and b/ mobile first as these names suggest we can use these frameworks either starting at wider widths and work down to narrow, WITHOUT any fixed breakpoints, so you can add your own when and if required, or up from narrow to wider widths.
Again this is my own humble opinion and that is although on the surface this one would appear to be the one of choice for those who cannot grasp the design layout using mobile first, it is however the most difficult of them all to master for users who either don't have a great deal of coding experience and perhaps even no knowledge of what code (CSS or JS) is and how to tell site designer what it is you want it to do for you.
So apart from understanding and being able to use Site Designers own element/styles/element/inspector panel (which are the same for ALL frameworks) Frameworkless can be perhaps THE MOST DIFFICULT of all to master, It is however quite possible to actually build pages for a website desktopdown WITHOUT USING any breakpoints at all, (I have done three websites now without breakpoins (but using custom codes) or perhaps just one (usually for mobile device widths and layouts that require a menu trigger to open the actual menu.
For each framework (except frameworkless) there are also plenty of built in ready made components which you simple add to your project. Inger also has a website that has a whole buch of them for downloading (INCLUDING Frameworkless)
For instance Foundation6 has a couple of ready made menu/header components which would suit your initial requirements to a T (or with a minimum of fiddling about)
As Frank suggests there are CC videos available that can take you through from start to finish, some users find them a little bit out of date nowadays and also hard to follow) I can and do: do step by step videos that are specific to someones requirements, there are others around on the forum too.
There is plenty of support available on this forum even some providing specialist code for frameworkless layouts.
Good luck and don't struggle in the beginning, don't be shy to ASK even if it seems to be a very simple easy question, we have all been throught that steep learning the humps and bumps curve that Site Designer has until the dawn of enlightenment and understanding breaks through the fog, and then OH BOY what a joy Site Designer is to work with, and is capable of building stunningly awesome websites, limited only by ones imagination.