Place all navbar menu items in a CSS instead of HTML

Question

I am doing my first ever site with Bootstrap + HTML + CSS and its been a steep learning curve had it not been for this site i would have been totally lost.

I have 11 html files all with a common navbar on top with comon menu items and a search block as well. Each time I have a new idea and add an item to the menu (navbar) i have to copy and past to all the other 10 files.

Is there a way one could add the menu items in a css so that it appears in all pages?

score 2 · Answer 1 · edited May 23 '17 at 11:46

Don't do this using CSS - CSS is for styling, not adding content. The best way to do it would be to put your navigation in a separate document and include it where necessary. Three obvious options are:

Using PHP as described in the answer by Hayder Abbass
Using JavaScript, see here: Include another HTML file in a HTML file
Using iFrames (see the link about Javascript for information about iFrame as well.

Depending on the technology you are using there are probably other ways to do this, but PHP and Javascript are probably the most common. Keep in mind the restrictions you add by selecting either though:

PHP needs a server that handles PHP correctly; meaning that your hosting provider needs to support this (very common though).
Javascript needs the user to have Javascript enabled in their browser. While this is probably commonly so, if the user doesn't have Javascript enabled, they won't get to see your navigation. Which is pretty bad.

There is in fact another option, that is separate from technology used. You could also look at using a web site editor / application that supports some kind of templates. When using Adobe DreamWeaver for example, you can easily create templates. This means all of your navigation could be in your template and your pages would be automatically updated automatically each time you update your template. I'm sure googling for editors will get you a substantial list of commercial, free or almost free editors that support something similar.

score 1 · Answer 2 · edited May 23 '17 at 12:31

A commong way you could do this is convert all your html files to php files (rename the file extension). Then put your common code in header.php. For example :

header.php should contain something like this:

<header role="banner" class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
  <div class="container">

    <nav role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="./getting-started">Getting started</a>
        </li>

        <li>
          <a href="./components">Components</a>
        </li>
        <li>
          <a href="./javascript">JavaScript</a>
        </li>
        <li>
          <a href="./customize">Customize</a>
        </li>
      </ul>

    </nav>
  </div>
</header>

Then in each of your files, reference it as :

include_once('header.php');

Should you have any changes to the navbar, you only need to edit header.php to reflect the changes on all other pages.

More information on this page: Creating a PHP header/footer

Just to clarify: This is not the *only* way to do this, just a very common (and if PHP is available, probably the best) method. If you can't or don't want to use PHP, you could, for example, include a Javascript that adds the menu. — Darkwater, Dec 28 '13 at 10:27

Place all navbar menu items in a CSS instead of HTML

2 Answers2