'Do I have to duplicate the navbar code on every page with Bootstrap?

I'm currently making a site with bootstrap that has multiple pages. My approach was to create multiple html files, e.g. Index.html, Products.html, Contact.html.

Now, do I have to duplicate the code for my navbar in every of those files? This seems rather cumbersome, as when I want to change something in the navbar, I have to go change it in every single file.

(Of course the code won't be an exact duplicate, as e.g. the active class is different on each html page, but like 99% is common code)

I of course know that I could use a CMS like Joomla that would handle this for me. But if I don't want to take that step, is it possible with Bootstrap? Or is that not what Bootstrap is for? Curiously, I couldn't get any google hit on that topic with my queries. Maybe I'm missing something.

htmltwitter-bootstraptwitter-bootstrap-3


Solution 1:[1]

Even if you aren't going to use the backend aspect of it, I recommend switching the files to .php and using includes.

EXAMPLE

PHP (page)

<?php
    $active = "ID-THAT-CORRESPONDS-WITH-ID-IN-NAV-ANCHOR"; 
    include '_includes/header.php';
?>

    page body here

<?php
    include '_includes/footer.php';
?>

PHP (header)

<nav class="<?php echo $active; ?>">
    <a href="#" id="home">Home</a>
    <a href="#" id="about">About</a>
    <a href="#" id="contact">Contact</a>
</nav>

CSS/LESS

nav {
    /* if nav has class of home, style id of home to active state */
    &.home #home {
        ...
    }

    /* if nav has class of about, style id of about to active state */
    &.about #about {
        ...
    }
}

In your header.php file is where you would have your nav/header/etc. Lets you update one file and have it update cross-site.

Solution 2:[2]

The best solution consist to create your website body (navbar + background) and then use javascript to load different html into the body. So navbar will not being duplicate.

Imagine two boxes, the first one contain all of your bloc that doesn't change (navbar). And the second who is containing all content. With second box inside the first box.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kevin Wallis
Solution 2 Orelsanpls

Related Questions