Is it possible to make a nav-bar once, then apply it to many pages?

Hi @John_Peruso unfortunately it’s not currently possible to apply an element created in the builder across multiple pages. This relates back to Unbounce being designed as a landing page builder as opposed to a tool for websites. Because of this there are going to be some pain points when linking multiple pages together. I’ve got some suggestions for you though 🙂

The easiest approach would be to build yourself a template. You can create a page in your account to act as a base template, which can be duplicated as a starting point for every page you create afterwards. This base template could have the navbar pre-built, so it is always there form the start. This isn’t perfect though. You’d need to have the URLs for the pages decided before hand, and any edits would need to be made to every page individually. It also doesn’t help much if you’ve already created the pages.

You could also potentially take advantage of script manager for this, although I wouldn’t recommend it. Script manager was designed to include javascript on every page and isn’t really intended as a way to place visible elements on multiple pages. That being said, what it actually does is insert the code in the specified place in the html markup of the page. This is why the javascript always needs to be wrapped in script tags.

So in theory you should be able to add html and css to script manager as a way to apply a navbar to every page. There are some caveats though. Mainly this will need to be hard coded so you won’t be able to take advantage of the page builder in order to create and style the navbar. You would need to include the html and the CSS (CSS wrapped in style tags) that targets that html in order to get it looking nice. That CSS would also need to set the position of the navbar on the page (keep in mind that all the elements created in the builder have absolute positioning, so the navbar would need to follow suit.

In practical terms this is definitely possible. However, speaking frankly, it’s a bit of a hack when considering how script manager was designed. If you’re familiar with html and css, or have someone on your team that is, it shouldn’t be too difficult. Unbounce won’t be able to officially support it though and can’t guarantee that it will work the way you need it to. Unfortunately we won’t be able to help troubleshoot custom code either, so if something isn’t working out the way it needs to we won’t be able to provide much help in Support I’m afraid.

Warnings aside, there are plenty of examples online of navbars that include the html and CSS to build them (Ex. https://codepen.io/search/pens?q=navbar&limit=all&type=type-pens). I would highly advise against this approach though without some html and css knowledge as there are quite a few pitfalls that could arise. CodePen is great for working examples of code, but there is no guarantee any of them will work out of the box with Unbounce and may require some tweaking. So proceed with caution.

Hope this helps a bit! This is a great feature request by the way and something that has been requested before, so who knows, it might end up getting built in at some point. I can’t promise anything though.