I am stuck trying to add some text below my header and navigation bar. Here is the code I've been working with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<link rel="stylesheet" href="styles.css">
<title>How to use the Print Tool</title>
</head>
<body>
<div>
<header>
<a href="https://ecj.com.jm/"> <img src="../img/ecjLogo.png" id="logo"> </a>
<div class="name"> Business</div>
<input type="checkbox" id="menu-bar">
<label fr="menu-bar">Menu</label>
<nav class="navbar">
<ul>
<li> <a href="#">Application</a></li>
<li> <a href="#"> Help </a></li>
<li> <a href="#"> About </a></li>
<li> <a href="#"> Contact </a></li>
</ul>
</nav>
</header>
</div>
<div>
<h1>Geographic Information Systems (GIS) Department - ECJ Web Map Ver. 2.0 </h1>
<p> hello
</div>
</p>
</body>
</html>
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
text-transform: capitalize;
text-decoration: none;
}
body{
background: #dee1e2;
min-height: 100vh;
overflow-x: hidden;
}
header{
position: fixed;
top:0;
left:0;
right:0;
background: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
padding: 20px 7%;
display: flex;
align-items:center;
justify-content: space-between;
z-index: 1000;
}
header .name{
font-weight: bolder;
font-size: 25px;
color: #333
}
header .navbar ul{
list-style: none;
}
header .navbar ul li{
position: relative;
float: left;
}
header .navbar ul li a{
font-size: 20px;
padding: 20px;
color: #333;
display: block;
}
header .navbar ul li a:hover{
background: #333;
color: #fff;
}
header .navbar ul li ul{
position: absolute;
left: 0;
width: 200px;
background: #fff;
}
#menu-bar{
display: none;
}
header label{
font-size: 20px;
color: #333;
cursor: pointer;
display: none;
}
h1{
color: #333;
}
@media(max-width:991px){
header{
padding: 20px;
}
header label{
display: initial;
}
header .navbar{
position: absolute;
top:100%;
left: 0;
right: 0;
background: #fff;
border-top: 1 px solid rgba(0, 0, 0, .1);
}
header .navbar ul li{
width: 100%;
}
header .navbar ul li ul{
position: relative;
width: 100%
}
#menu-bar:checked ~ .navbar{
display: initial;
}
}I have attempted various methods like enclosing the navigation bar in a div and changing font colors without success. Any help on how to add additional code below the navigation bar would be highly appreciated. I have included the CSS and HTML code for reference and assistance. Your support will be greatly valued.