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


#1

Hey there… I am about to begin an initiative to tie many of our landing pages together. We have several dozen landing pages and our industry is health-care related so we want to make some “webpage-like” sections that we link to in a stick-nav bar so people can choose which treatment, location, and programs they’re interested in.

One of the things I’m trying to figure out is if I can make one nav-bar and then apply it to all the pages, since the goal is to have them all share the same navbar structure. As of now, I can go into an individual landing page and make the navbar and have each button link to the appropriate page, but this is going to be super time-consuming and tedious.

Does anyone know of a way that I could make the nav-bar once and then apply it to all my pages? Or if there is a way I can copy the navbar and then paste it into each langing page to speed up the production of initiative?

Or is there any other approach you could suggest to me that would speed up what we’re trying to do?

Thanks!


#2

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 :slight_smile:

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.


#3

Thanks a lot for this response! I am using the approach you suggested and making progress… Templates it is! It’s a bit tedious, but the result is beautiful, responsive pages that are easy to update so we’re not complaining over here at all! Keep up the great work. We love Unbounce.