I’m slowly and clumsily redesigning my old Rapidweaver 5 sites into the exciting new world of Rapidweaver 8 and Foundation 6. I have a site pretty much completed, but I’d like to have a version that suppresses my site head (which includes a drop-down menu) and instead uses the standard mobile hamburger menu as as a navigator. I’ve successfully told the site to suppress the site head on mobile, and that works fine. I assume I have to set up a new mobile menu and tell it to suppress itself for desktops and tablets, but I can’t seem to find a mobile menu stack in the navigation stacks Foundation 6 provides, or anywhere else for that matter. Am I missing something basic? This must be something that people do all the time with sites, but I can’t seem to figure out how to do it. Thanks!
If I understand what you are asking about, I think you want to have a look at the templates available for F6.
https://www.weavers.space/download/foundation-templates
Have a look at the one call RW Top Bar.
Here is a video: https://youtu.be/n-qWYlg3vr0?t=2744
Thanks. I think I need a little more guidance about Top Bar–I might have set up the menu in my site wrong and need to correct it. Here’s what the top looks like now, and this is how I’d like it to look on desktops and tablets:
Here’s how it’s set up in Rapidweaver:
From what I understand from the video you cited, Top Bar makes it possible to change the head when the browser window gets smaller. That seems like exactly what I want: I’d like to have a mobile version that gets rid of the banner photo and just has a hamburger menu on the lefthand side with a small logo. How do I do that? What do I need to change about my main menu/banner swatch to accomplish it? Thanks!
Okay,
I’m not an expert on F6, but this is how I’d do it if I understand what you are looking for.
If you want the banner (image and headings to go away on small and Med, then
- put a visibility stack on to the page (set to show on Medium + large)
- Put the container (with the swatch for the background image) inside the visibility stack
- Put the headers inside the container stack
- I would add bottom padding or add height and get rid of the spacer stack
- Now add a top bar stack just below the container
- remove one of the areas on top bar settings
- Enable the title bar on the top bar
- take the dropdown menu and drag it inside the top bar area.
Something like this:
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.