How to Create a Navigation Bar from a List on the Raspberry Pi

By Sean McManus, Mike Cook

At the top of a web page is a list of links. You want use your Raspberry Pi to turn them into a navigation bar, a set of horizontal buttons. But you only want to make this list a navbar; you don’t want to affect other links or lists on the page.

The first step is to add <div> tags to the HTML file to mark where the navbar starts and ends, like this:

<div class="nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="galleries.html">Galleries</a></li>
  <li><a href="tips.html">Photography tips</a></li>
  <li><a href="contact.html">Contact</a></li>

You’ll see the class name nav for the navbar, so in the CSS file, add the following line, which makes the list items appear side by side, instead of starting a new line for each one:

.nav ul li { display:inline; }

Now you can style the links inside the nav class so they look like buttons. That just means turning off the underlining on the link text, making the text bold, using a light color on a dark background (we’ve chosen white on blue), and adding some padding to make the link appear bigger, like a button. Here’s the CSS code you need:

.nav a { text-decoration: none;
   font-weight: bold;
   color: white;
   padding: 8px;
   background-color: blue;
   border: 1px blue solid;
   border-radius: 16px; }

The last line makes the corners of the buttons rounded. It doesn’t work on some other browsers (including Netsurf on your Raspberry Pi), but browsers that don’t understand it just ignore it and show normal square corners instead, so it’s safe to include it. Online, you can find workarounds you can use to make rounded corners work on more browsers.

You now have a working navigation bar created from a list. You might notice, however, that it’s not lined up with the rest of your content, and it’s slightly indented. That’s because a list has some padding on it usually, so you need to remove that. Here’s how:

.nav ul { padding: 0px; }