Building a Simple NavBar

Header: Before the NavBar

In many web pages, the header – or top image/logo has a Menu underneath that allows users to navigate throughout the site!

In the image below, we see a header with a coffee mug background and we are going to build a Menu or NavBar underneath it!

The header we are going to add a NavBar to:

Let’s get started.

Anchor Tags

First things first, head over to your HTML file and create a new div, or section of your webpage below the header tag. This div will have id=”NavBar” which indicates to me(or the developer) that this div will contain the NavBar.

Next, I added two anchor tags, or <a> tags within the NavBar div Home and About. These are the two menu items that will be in the NavBar!

Note:  If you are unsure how to create an anchor tag, read my tutorial on how to create a simple anchor, or <a> tags!

Note: Make sure you include a closing </div> tag!

Once your anchor or <a> tags are created, save your file so that you view it in your browser, and viola! your webpage will now look like this:

Woo! The beginning of your Menu, or NavBar!

Styling your NavBar

In order to style up your NavBar div, take a journey over to your CSS Stylesheet.

If you are unsure about what a CSS Stylesheet, check out my super simple tutorial!

In your stylesheet, use the CSS selector ‘#’ to indicate that you are styling an element with id=”NavBar”.

Note: use ‘#’ to indicate you are styling an id, and ‘.’ to indicate you are styling a class.

Le Example:

Now that I’ve indicated to my stylesheet that I am styling the element with id=”NavBar”, it’s time to rock and roll! (Guns N’ Roses may or may not  be playing at the cafe I’m writing this at rn)

I want to give this NavBar a background color that seems a little bold, but that’s because I’m too extra to care to help you see it clearly! I also wanted my NavBar to span the entire width of my webpage. As far as the height goes, I chose 40px to start, and tbh there was no logic behind it but I figured I can easily change it later!

Le Example:

Let’s look at how I coded this:

Let’s break down the style features

  • background-color: rgb(118, 106, 42);  Note: you can add any color here!
  • height: 40px;  Note: Again, random height, but it looks alright so I’ll keep it! For now…
  • width: auto;  Note: This is to ensure my NavBar spans the entire width of my webpage.

#NavBar {

background-color: rgb(118, 106, 42);

height: 40px;

width: auto;

}

Now that the div of the NavBar looks colorful, it’s time to style those anchor tags!

Styling your Anchor Tags

One way to style your anchor, or <a> tags is to style all a tags in your CSS Stylesheet by using the selector ‘a’. This will style all a tags!

a{

}

Note: when styling a general element, you do not need to include a ‘#’ or ‘.’ when selecting it in your stylesheet

The other way to style your anchor tags is to give each anchor tag a specific class or id and then style them individually in your stylesheet.

The first option makes for quick styling, and the second option makes for more flexible styling!

It’s up to you how you want to do this!

I am choosing to do the first method because it is easier and I only have a few anchor tags on my webpage!

Note: Once I have more anchor tags on my webpage – for example, links throughout my blog posts, I may want to style them individually, so I would add an id to it to style it separately in my CSS stylesheet.

Here is how I will style my anchor tags all at once:

Let’s break down the style features:

  • color: white;  Note: this indicates the font color
  • font-family: Arial, Helvetica, sans-serif;  Note: this indicates the font style or family
  • font-size: 16px;  Note: This is the font size
  • text-decoration: none;  Note: This eliminates that underline that is automatically placed under the link name!

a{

color: white;

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

text-decoration: none;

}

Now my webpage will look like this!

Note: Feel free to play around with font color, family and size!

Centering Anchor Tags in your NavBar

You may notice some new style features in my code!

in #NavBar{ } you’ll see:

padding-top: 10px; Note: this gives a 10px pad between the top of the NavBar div and the top of my anchor tags!

and in a{} you’ll see

padding-left: 28%; Note: this gives a 28% pad between each anchor tag and whatever is to the left of it!

Which centers the anchor tags within the NavBar like so:

 

Bonus: Styling Anchor Tags Individually

Now some of you may be thinking “Uhhh, I want to give my anchor tags an id to style them individually!”

And to that I respond:

Rachel was the best bachelorette of all time. Don’t @ me.

Kidding! Depending on the web page project I am working on, sometimes I love styling my anchor tags individually!

This is what it looks like to add an id to your anchor tag.

BONUS: I’ve added a few more anchor tags to my NavBar!

Le Example:

To account for the additional menu items/spacing, I decreased the padding-left to 15%

Which results in this:

 

Ta-Da!

 

Subscribe to Tech Talk Code to get email updates on new posts!

 

Leave a Comment!