Footer Navigation Menu

Create Footer Navigation Menu for Drupal

The aim here is to make a footer navigation in Drupal so that I can move some important but infrequently used links to the bottom of the page.

I want the result to be something like this:

appearing at the bottom of my pages.

In my case, I have already set up the links (and related pages) but previously had them in a (custom) menu-block. Now I want these links at the bottom of all the pages - not in a vertical block but in a horizontal line.

Create a Custom Menu

So the first thing you have to do is create a custom menu. When you create a custom menu in Drupal, one of the required fields you have to enter is "Menu name" ~ which is going to be very important for what we need to do here.

Just to recap on the fields you have to enter when creating a custom menu in Drupal:

The "menu name" you choose can be anything; in this example, we have used "site-info".

The importance of the "menu name"

What we need is to find out how Drupal displays our menu-block ~ specifically, we are looking for unique style identifiers or style classes that we can then use CSS to be able to style them to how we want that menu-block to look.

Visually, this is how our menu block codinglooks like. You will note that the outer-most <div> has a class identifier which uses the name of our "menu name". This then is the unique identifier we need for our CSS; specifically: block-menu-menu-site-info.

CSS and Styling Drupal Footer Navigation

Okay, now we have identified the 2 most important style identifier and class we can use in our quest to create the Footer Nav bar.

Recap:
1. We have created a custom menu that we called "site-info".
2. We have or can create pages that are assigned to this menu.
(When creating a 'page', 'story', 'book type', 'blog entry' etc. in Drupal, if you have the permission, you click on "Menu Settings" to assign the article you are writing to a specific menu).
3. We want our menu block to appear at the bottom of page (i.e. a Footer Navigation) with each link in a horizontal line

So now we go to our relevant stylesheet and create the styles for our Footer Navigation. Below is one possible way. Most notable is that in the first declaration, I have specified that list-style: none ( so there are no default bullets next to each list <li> item).
Secondly, in the next declaration, that the <li> are to be styled as display: inline ( i.e. in a horizontal, normal-text-flow line).

#block-menu-menu-site-info ul.menu
  {
    padding: 0;
    margin: 0;
    list-style: none;
  }  
#block-menu-menu-site-info ul.menu li  
  {
    display: inline;
    border-left: none;
    margin: 0;
    padding: 0;
  }

Display the Footer Navigation

Remember, the custom menu you have just created is automatically a "block" in Drupal terms. But by default, it is 'disabled' (i.e. not visible). To make it visible, you have to move it into a visible region and out of the 'disabled'.
Administer > Site Building > Blocks

Once you have moved it into position (in this case, probably into the 'footer' region) and saved, you can further configure the block (by clicking the 'configure' link). For instance, you may not want the Title of the block to appear on your pages or you only want that specific block to appear (or not appear) on specific pages.

Once you can see your Footer Navigation (menu block) on your pages, it is very likely you might have to tweak your CSS until you get exactly the look you want.