I think I miss something simple, but I would like to have different Nav. Bar for desktop and mobile, the desktop one is paired with a banner to the top, while the mobile version shall be on top (and will have a different styling).
However, adding a second nav bar and activating/deactivating via “Responsive → Hide this stack” seems not work.
How to archive this?
/heiko
I use the Agent stack from Joe Workman for this. It does not hide the stack but tells the server not to deliver it - so I can tell the stack to use Nav 1 for mobile only and the other one for the rest…
A paired navigation bar is positioned outside of its original div. The hiding mechanism hides the original stack, but the absolute positioned element, used for the pairing, is not affected.
Coming at this from a different angle, how does the style you want for the mobile version differ from the desktop? It may be possible to have the one nav bar do both, especially if you are using Navbar Pro.
If you can give more info on what you want to achieve, users may be able to suggest working alternatives.
Using the show/hide settings and the Visibility stack for some elements is fine, but sometimes there are better options. In particular with menus. If you are running two versions per page it can quickly get messy when editing further down the line.
Plus you have to remember that hiding elements on the page don’t stop it being downloaded to the browser, it just tells the browser to not display it. So you are adding weight to the page. Not a problem with bits of text etc. but once you start to apply it things like menu structure you are starting to slow down your page load times.
That would be me second option, might go this route.
Thank @TemplateRepo. This is all known to me, doing this job for a while now. I typically use RapidWeaver for some quick projects to avoid coding, otherwise I can do this easily on my own.
As I said in my initial post, I want to have the mobile menu on top of the banner (while the desktop should be below) and I also want to change the wording a little bit, as space is limited on mobile devices.
That is achievable using a single navbar stack with some css, but as you are proficient in coding I’ll leave you to it.
Right, but I wanted to try it with the basic Foundry stuff 
OK. In which case create two versions of the entire header; nav bar and banner. Then use the visibility stack to set visibility accordingly.