How to Show My Navbar

Ahr Aitch · Oct 2, 2023

I've created a navbar for my website. It is a separated html/css pair of files at the moment (code below).

I need to know how to put it into my website HTML/CSS files so that it will appear as the top heading for each page. Of course, I will strip out just the relevant HTML leaving the HEAD, etc out. I created it this way to avoid having to deal with all the other HTML already in my website code. Website is: rhhutchins.com.

I would greatly appreciate help with this as I've tried multiple times without success. Searches have shown how to to do with an unordered list; but when I've tried that, it didn't work.

CSS

/* #navbar */
#navbar {position:relative; z-index: 9999;} /* Navbar is on top */
#idOfContentHere {position: relative; z-index:0} /* Your content is not on top */

.navbar
{
display: grid;
position: relative;
z-index: 9999;
margin-left: auto;
margin-right: auto;
width: 1100px;
height: 20px;
border-width: 2px;
border-style: ridge;
border-radius: 5px;
grid-template-columns: ;
grid-template-rows: 1;
grid-template-areas:
'home personal-pages hutchins-line baker-line histories anecdotes submissions search help';
}
.navbar > div
{
background-color: beige;
text-align: center;
font-size: 15px;
padding: 5px;
}
.home
{
grid-area: home;
}
.personal-pages
{
grid-area: personal-pages;
}
.hutchins-line
{
grid-area: hutchins-line;
}
.baker-line
{
grid-area: baker-line;
}
.histories
{
grid-area: histories;
}
.anecdotes
{
grid-area: anecdotes
}
.submissions
{
grid-area: submissions;
}
.search
{
grid-area: search;
}
.help
{
grid-area: help;
}

HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<link
type="text/css"
rel="stylesheet"
href="navbar.css"
media="screen">
<title>Header</title>
</head>
<body>
<div class="navbar">
<div class="home">
Home
</div>
<div class="personal-pages">
Personal Pages
</div>
<div class="hutchins-line">
Hutchins Line
</div>
<div class="baker-line">
Baker Line
</div>
<div class="histories">
Histories
</div>
<div class="anecdotes">
Anecdotes
</div>
<div class="submissions">
Submissions
</div>
<div class="help">
Help
</div>
<div class="search">
Search
</div>
</div>
</body>
</html>
HTML

Search

Search

How to Show My Navbar

Ahr Aitch

New member

Similar threads