How to Make a Menu Bar with HTML and CSS

I'm busy. I'm working on 3 projects:

Big text adventure game in Python
Simple operating system in C#
Website in HTML, CSS, and JavaScript

As two people are working on a web dev course (not mentioning their usernames for productivity), I'm working on those projects.

But I had to release something. So I made a tutorial on how to make a menu bar with HTML and CSS.

Making the menuBar `<p>`

Make a new HTML, CSS, JS repl

Inside the body, type somethig similar to the following:

<p class="menuBar"> Home | Page 1 | Page 2 | Page 3 </p>

If you click run, you should see this:

Add links to other webpages as neccasery. (remind me if there's a right way to spell that.)

That is the beginning. From here, to create the menu bar, we will mostly use the stylesheet (style.css if you are editing a css file or in between the style tags if you're going old-school).

Getting ready to edit the stylesheet

To start, add this code into the stylesheet:

.menuBar {
    
}

. will indicate that you are editing a class.

menuBar is the class name.

The brackets ({}) is where you put the stuff to style.

Centering the text

First, you need to center the text so it looks better. You can do that with the stylesheet.

Add this to the stylesheet:

.menuBar {
	text-align: center;
}

When you open the page in a new tab, you should see this.

That is the first step.

Adding a font

Some fonts you need to import. This part will be an example for importing Roboto.

If you want to use Roboto, put this in your head:

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];400&display=swap" rel="stylesheet">

Then, to use the font, put this in the .menuBar of the stylesheet:

font-family: 'Roboto';

The 'Roboto' is how you can get the font.

We can go further. If you want a version with a certian thickness, add something like this, replacing 50 with your desired font weight:

font-weight: 50;

When you open the page in a new tab, it should display the following:

Your current menu bar now looks a little more stylish.

Adding color

Making color in CSS is simple. Add this (replacing the colors with colors of your choice) to your stylesheet:

color: rgb(0, 0, 255);
background-color: rgb(255, 0, 0);

Let's break that down.

color, in this case, is the font color.

background-color is the background color.

When webpage is opened in a new tab, it should look like this:

Adding space

We should add some space in between everything. Put this into the menuBar of the stylesheet, putting as many px as you need:

padding: 16px;

That will add some space. Of course, the background color is shown in that extra space.

When webpage is opened up in a new tab, it should show this:

Borders

Now, we're getting to the interesting part.

To add a border, use border. Example:

border: 4px solid rgb(0, 0, 0);

This will create a black rectangular border around the current menu bar.

To make a rounded border, use border-radius Example:

border-radius: 30px;

When opened in a new tab, it will display the following:

Congratulations! You have made a decent menu bar!

Remind me of typos and stuff.