Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Change Nav globally from single file - Bootstrap 4

If you have a very large Site that has the same navigation on every page, how do you make a bootstrap 4 Nav that can be changed globally throughout the Site from one source (without having to do find and replace)? As in change the Nav once and it automatically is updated across the board for all pages in root and subs.

1 Answer

You can store the code for your nav in a separate file, called a template. And load that file on each page.

There are many ways to do it, depending on your environment.

  • Pug / Handlebars / Twig and other template engines
  • Content management systems like Wordpress often have their own way for creating reusable templates.
  • PHP includes (Wordpress and other CMS's makes use of these)
  • React components

They all follow the same basic process. You store your code in one place, then reference it in as many places as you like. As you've discovered, it makes it much easier to maintain.

There's not really a way to do this with plain HTML. You want something 'dynamic' to handle creating and displaying the template.

Hope this helps :)