How do I add text under my navigation bar? - html

Question

Right, so I followed a tutorial and made a navigation bar in HTML, CSS, & JS (Note I am a beginner to web development) Anyways, I have different pages now for each part such as home, about, contact etc. How do I add a title and everything to the page under the navi bar?
let searchBtn = document.querySelector('.searchBtn');
let closeBtn = document.querySelector('.closeBtn');
let searchBox = document.querySelector('.searchBox');
let navigation = document.querySelector('.navigation');
let menuToggle = document.querySelector('.menuToggle');
let header = document.querySelector('header');
searchBtn.onclick = function() {
searchBox.classList.add('active');
closeBtn.classList.add('active');
searchBtn.classList.add('active');
menuToggle.classList.add('hide');
header.classList.remove('open');
}
closeBtn.onclick = function() {
searchBox.classList.remove('active');
closeBtn.classList.remove('active');
searchBtn.classList.remove('active');
menuToggle.classList.remove('hide');
}
menuToggle.onclick = function() {
header.classList.toggle('open');
searchBox.classList.remove('active');
closeBtn.classList.remove('active');
searchBtn.classList.remove('active');
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #dee1e2;
min-height: 100vh;
overflow-x: hidden;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
background: #fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
}
.logo {
color: #333;
text-decoration: none;
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.group {
display: flex;
align-items: center;
}
header ul {
position: relative;
display: flex;
gap: 30px;
}
header ul li {
list-style: none;
}
header ul li a {
position: relative;
text-decoration: none;
font-size: 1em;
color: #333;
text-transform: uppercase;
letter-spacing: 0.2em;
}
header ul li a::before {
content: ' ';
position: absolute;
bottom: -2px;
width: 100%;
height: 2px;
background: #333;
transform: scaleX(0);
transition: transform 0.5s ease-in-out;
transform-origin: right;
}
header ul li a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
header .search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
z-index: 10;
cursor: pointer;
}
.searchBox {
position: absolute;
right: -100%;
width: 100%;
height: 100%;
display: flex;
background: #fff;
align-items: center;
padding: 0 30px;
transition: 0.5s ease-in-out;
}
.searchBox.active {
right: 0;
}
.searchBox input {
width: 100%;
border: none;
outline: none;
height: 50px;
font-size: 1.25em;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.searchBtn {
position: relative;
left: 30px;
top: 2.5px;
transition: 0.5s ease-in-out;
}
.searchBtn.active {
left: 0;
}
.closeBtn {
opacity: 0;
visibility: hidden;
}
.closeBtn.active {
opacity: 1;
visibility: visible;
transition: 0.5s;
scale: 1;
}
.menuToggle {
position: relative;
display: none;
}
#media (max-width: 800px) {
.searchBtn {
left: 0;
}
.menuToggle {
position: absolute;
display: block;
font-size: 2em;
cursor: pointer;
transform: translateX(30px);
z-index: 10;
}
header .navigation {
position: absolute;
opacity: 0;
visibility: hidden;
left: 100%;
}
header.open .navigation {
top: 80px;
opacity: 1;
visibility: visible;
left: 0;
display: flex;
flex-direction: column;
background: #fff;
width: 100%;
height: calc(100vh - 80px);
padding: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.5);
}
header.open .navigation li a {
font-size: 1.25em;
}
.hide {
display: none;
}
}
<header>
Matteos Palm Tree
<div class="group">
<ul class="navigation">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact Me</li>
</ul>
<div class="search">
<span class="icon">
<ion-icon name="search-outline" class="searchBtn"></ion-icon>
<ion-icon name="close-outline" class="closeBtn"></ion-icon>
</span>
</div>
<ion-icon name="menu-outline" class="menuToggle"></ion-icon>
</div>
<div class="searchBox">
<input type="text" placeholder="Search Here . . ." </div>
</header>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
I tried just adding simple text under all the code in it showed up inside of the navi bar (I used inspect to check where it is)

Answer 1

Because the header is absolutely positioned it's rendered outside the normal flow of the document so the section beneath it is effectively not aware of its existence, so any text after the header is placed underneath the header. We can solve this by setting the top margin of the section element to be the height of the header. I can see that you've set the header size as 80px and you've used this in a few locations so I've set a css variable so you only need to change the height in once place and your page won't break.
Some reading on positioning elements at w3schools.com and from Kevin Powell
let searchBtn = document.querySelector('.searchBtn');
let closeBtn = document.querySelector('.closeBtn');
let searchBox = document.querySelector('.searchBox');
let navigation = document.querySelector('.navigation');
let menuToggle = document.querySelector('.menuToggle');
let header = document.querySelector('header');
searchBtn.onclick = function() {
searchBox.classList.add('active');
closeBtn.classList.add('active');
searchBtn.classList.add('active');
menuToggle.classList.add('hide');
header.classList.remove('open');
}
closeBtn.onclick = function() {
searchBox.classList.remove('active');
closeBtn.classList.remove('active');
searchBtn.classList.remove('active');
menuToggle.classList.remove('hide');
}
menuToggle.onclick = function() {
header.classList.toggle('open');
searchBox.classList.remove('active');
closeBtn.classList.remove('active');
searchBtn.classList.remove('active');
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root {
--navbar-height:80px;
--section-top-margin: 20px;
}
body {
background: #dee1e2;
min-height: 100vh;
overflow-x: hidden;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--navbar-height);
background: #fff;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);
}
.logo {
color: #333;
text-decoration: none;
font-size: 1.5em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.group {
display: flex;
align-items: center;
}
header ul {
position: relative;
display: flex;
gap: 30px;
}
header ul li {
list-style: none;
}
header ul li a {
position: relative;
text-decoration: none;
font-size: 1em;
color: #333;
text-transform: uppercase;
letter-spacing: 0.2em;
}
header ul li a::before {
content: ' ';
position: absolute;
bottom: -2px;
width: 100%;
height: 2px;
background: #333;
transform: scaleX(0);
transition: transform 0.5s ease-in-out;
transform-origin: right;
}
header ul li a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
header .search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
z-index: 10;
cursor: pointer;
}
.searchBox {
position: absolute;
right: -100%;
width: 100%;
height: 100%;
display: flex;
background: #fff;
align-items: center;
padding: 0 30px;
transition: 0.5s ease-in-out;
}
.searchBox.active {
right: 0;
}
.searchBox input {
width: 100%;
border: none;
outline: none;
height: 50px;
font-size: 1.25em;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.searchBtn {
position: relative;
left: 30px;
top: 2.5px;
transition: 0.5s ease-in-out;
}
.searchBtn.active {
left: 0;
}
.closeBtn {
opacity: 0;
visibility: hidden;
}
.closeBtn.active {
opacity: 1;
visibility: visible;
transition: 0.5s;
scale: 1;
}
.menuToggle {
position: relative;
display: none;
}
#media (max-width: 800px) {
.searchBtn {
left: 0;
}
.menuToggle {
position: absolute;
display: block;
font-size: 2em;
cursor: pointer;
transform: translateX(30px);
z-index: 10;
}
header .navigation {
position: absolute;
opacity: 0;
visibility: hidden;
left: 100%;
}
header.open .navigation {
top: 80px;
opacity: 1;
visibility: visible;
left: 0;
display: flex;
flex-direction: column;
background: #fff;
width: 100%;
height: calc(100vh - var(--navbar-height));
padding: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.5);
}
header.open .navigation li a {
font-size: 1.25em;
}
.hide {
display: none;
}
}
section {
margin-top:calc(var(--navbar-height) + var(--section-top-margin));
}
<header>
Matteos Palm Tree
<div class="group">
<ul class="navigation">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
<li>Contact Me</li>
</ul>
<div class="search">
<span class="icon">
<ion-icon name="search-outline" class="searchBtn"></ion-icon>
<ion-icon name="close-outline" class="closeBtn"></ion-icon>
</span>
</div>
<ion-icon name="menu-outline" class="menuToggle"></ion-icon>
</div>
<div class="searchBox">
<input type="text" placeholder="Search Here . . ." </div>
</header>
<section>
This is your section text
</section>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>