Adding Links and styling a Nav bar

In this post we are going to continue on directly from the last post. We will be looking to make the nav bar look a bit nicer as it’s a bit ‘meh’ at the moment, and we will also create some pages to link to. We can start with that now.

Linking your nav bar

This is very easy, and if you have been following this series, you will already be guessing how to link pages to your nav bar, if you haven’t already. Here are the steps we need to take.

Linking the pages

Open up your index.html page and alter the header text as follows. As you can see we are putting links into the anchor tags in the header.

<header>
  <p>This is your header</p>
  <nav>
    <ul>
      <li>
        <a href='index.html'>Home<a/>
      </li>
      <li>
        <a href='about.html'>About<a/>
      </li>
      <li>
        <a href='contact.html'>Contact<a/>
      </li>
    </ul>
  </nav>
</header>

Now that we have the anchors pointing at our soon to be new pages, we need to create the pages!

Creating the pages

Create two new files in your root and call them “about.html” and “contact.html”. Now copy in the code from your index.html into the two new pages, but make some small changes:

<div id="main">
  <p>This is your about page</p>
</div><!-- close of main -->
<div id="main">
 <p>This is your contact page</p>
</div><!-- close of main -->

As you can see, all we have done is change the text in the main div.

Now if we start clicking away in the header, we see that we have created a pretty basic navigation system in the header for our small site :) If you want you can see if you can make some interesting content for your about and contact pages. Maybe you can use an unordered list ( <ul> ) to put down your contact details.

Make the nav look nice

I think we can all agree that the nav is looking a bit lame at the moment. Let’s use some CSS to make things a bit more asthetically pleasing. The first thing we can do is give the menu bar a background colour. I’m going to be keeping things in the grey colour scheme we have at the moment, but if you want to use bright yellows and shocking pinks, feel free.

Lets start by putting in a background. Add the following styles to your CSS:

nav{
  background: #666;
  width: 100%;
}

Now lets colour the links and add some spacing and borders:

nav ul li a{
  color: #fff;
}
nav ul li {
  margin-left: 10px;
  border-right: 1px solid white;
  padding-right: 13px;
}
nav ul li a:hover{
  color: #ddd;
}

Make all those changes and refresh your page. Things are getting to look a bit better. Ok, we’re not going to win any awards but it shows you principal of styling your nav bar, and how to seperate it from the rest of the header. Have a look around the web and see what else you can find, and if you can copy some other nav styles. This is one of the best ways to learn – look at other web sites and see if you can take some inspiration. Using your chrome developer tools, you will be able to see exactly how someone else has got the result you can see on their page. I have spent hours disecting other people’s sites and styles – not to directly copy of course! – but to get ideas as to how certain stylistic elements are achieved, and how different elements can be used together.

Little steps

One of the important things to remember when styling a page is that what you leave out is just as important, if not more so, than what you put in. It’s very easy to throw every CSS trick you know at a site, and end up with a smorgasboard of the latest CSS technologies, but a very difficult site to look at and navigate. Lets try and add a few fancier CSS elements, but keep things simple and subtle…

Add the following CSS:

nav ul li a{
  text-shadow: -1px -1px 0 rgba( 0,0,0,0.5 );
}

If you now refresh your page, you will see that the text in the nav bar now looks like it is indented a little. What we have done is apply a ‘text-shadow’ property to the anchor text in the nav. I’ll break down the property for you.

The first two values, – “-1px -1px” relate to the x and y displacement of the text shadow. In this case, we are placing the shadow 1 pixel to the left and up in relation to the text. This is to make it look like light is hitting the ‘indented’ text from the top left.

The third value – 0 – is the spread of the shadow. As we are trying to be subtle here, I have set this as 0. You can give it any pixel value you want of course – try 1px, 2px, and so on.

What is RGBA?

And the last  – rgba( 0,0,0,0.5 ) – is for the colour of the shadow. Computers can be told about colours in many different ways – here I am using the RGBA format. The RGBA stands for:

  • R – red
  • B – blue
  • G – green
  • A – alpha

So with the following format, we are assigning a level to each of the three colours red, blue and green ( we’ll get to the alpha value in a minute). By assigining these differenet levels, the result is a mix of the three colours. and alpha is then the transparency of the colour. Let’s make it more obvious with an example:

rgba( 255, 0, 0, 1 )

This will give us a solid red colour – why? Because the red level has been set to 255 which is the maximum level. Blue and green have been set to 0. So we have all red and nothing else. Now if we mix it up,

rgba( 255, 0, 255, 1 )

.. you will get a strong purple from the mix of full red and full blue. As you are probably starting to see, this gives us a vast number of colours to choose from. Infact, 255 x 255 x 255 = 16,581,375 colours!

So what about the last value, the alpha value? This represents the transparency of the colour with 1 being fully opaque and 0 being fully transparent. Again, experiment with this and you will soon get the idea.

Now I hope it’s clearer what we are doing with our text-shadow property. There’s a lot to that one line! We position the shaodow to be 1 pixel to the left and up from the original text, and we set the colour to black with a 50% transparency ( rgba( 0,0,0,0.5) ). This gives us a subtle indent effect on the text. You can make the effect stronger and weaker by varying the transparency – have a mess around and see what you like best.

Box Shadow

Finally, lets apply another new property called ‘box-shadow’ to the navigation bar. Add the following to your nav element:

nav{
   box-shadow: inset 0 0 10px rgba( 0,0,0,0.4 );
}

Box shadow will do what it says on the tin, it will apply a box shadow to the nav element. You will recognise the same format as with the text shadow property, and it is identical in the way it is applied, apart from the inset value at the start.

‘Inset’ means that we are applying the box shadow to the inside of the box, in this case, being the nav element. If you have refreshed your page after applying the above style, you will see a subtle shading around the inside of the nav bar. Remove the inset and see how the shadow changes.

The following two 0’s mean that we are setting no offset to the shadow. We want the shadow to be applied equally around the element. And then we apply a spread of 10px – this defines how think or faint the shadow looks. Experiment with this number and see how it affects the shadow.

Finally, we see the colour of the box shadow, being defined using the familiar rgba format.

Next Time

It always seems that when I set out to write  a post I always think I’ll be able to fit in twice as much as I actually manage! It’s easy to forget that knowledge I now take for granted isn’t obvious, and I always end up finding I need to explain twice as much as I thought I would. In the next session I will be looking at setting up a drop down menu to the main nav bar. Exciting stuff :) Until next time, code easy bro’s and betties.

Leave a Reply