Marvel Now Supports Fixed Header and Footers For Mobile and Web Prototypes!

Posted 4 years ago by Murat Mutlu

It seems like every other day we get emails requesting the ability to set fixed headers and footers in your prototypes.. well I’m happy to announced that you can now fix headers and footers across both mobile AND web!

In the past fixed header and footers were typically used in apps, but it’s becoming more and more common for websites to use it for navigation too. So we decided to make the feature work across all types of prototypes.

The aim of Marvel is to quickly turn images into prototypes that look and feel like the real thing, fixed areas help add that extra bit of realism.

Check out the example below to see how it looks when you select a fixed header area. As you can see the blue top navigation bar remains static as the rest of the image scrolls underneath.

It’s really easy to add the area you want to fix. Head over to the editor and you’ll notice two handles either side of your image, simply grab the handles and drag to define the section.

And there you have it!

We’ll be improving the feature over the next couple of weeks, if you have any suggestions or spot any bugs let us know!

Not using Marvel yet? Sign up for free and created unlimited prototypes.

Hi! I'm one of the co-founders at Marvel and a Product Designer by trade. You can often find me asking why Arsenal haven't signed anyone this season. Follow me on Twitter.

Related Posts

A better way to organise your designs At Marvel, we understand how important organisation is when building prototypes. Projects can quickly scale to hundreds of screens, making them difficult to manage, present and collaborate on. That’s why we created Sections, it solves all this in an easy to use and intuitive format. Sections helps you organise screens and makes it… Read More →

Our mission at Marvel is to democratise design and give everyone access to the tools they need to visualise ideas. That’s why we created our Design Tool, it let’s anyone jump into the browser and start creating wireframes and mockups instantly. Now we want to take that to the next level by helping make every single design you create in… Read More →

At Marvel, we spend a lot of time thinking about how we can increase your design productivity. We’re always looking for ways to save you time, whether that’s automating the entire design-to-development process or simply one less click when prototyping. That’s why we’re excited to introduce our new tool, Userflows, built with the Marvel API. With one click you can… Read More →