Please help, my nav-bar looks different on different webpages and it's driving me mad
I have a simple website in progress and the nav-bar looks different on my home page and my learn more page. For the life of me, I can't find out why as they are linked to the same stylesheet and have identical HTML for the nav-bar.
I have tried setting a pixel height but that didn't work and I have tried internal stylesheets to adjust it but nothing has worked. This issue is driving me mad so please help me fix it.
An image of the nav-bar on my homepage
An image of the nav-bar on my learn more page
As you can see, the nav-bar is slightly smaller on the learn more page and the font-size is also slightly smaller on the learn more page.
I have attached the full code but not all of it is relevant to the nav-bar.
HTML For Home Page
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>GSAL Zoo</title>
</head>
<body>
<div >
<h2 id="first"><a href="learn.html">Learn more</a></h2>
<h2 id="second"><a href="extinction.html">Animal statuses</a></h2>
<h1 align="center"><a href="home.html">GSAL Zoo</a></h1>
<h2 id="third"><a href="WaysToHelp.html">Ways to help</a></h2>
<h2 id="fourth"><a href="QuizYourself.html">Quiz Yourself</a></h2>
</div>
<main>
<h2 align="center"><strong>Welcome to GSAL Zoo</strong></h2>
<h3 align="center">On this website, you will learn all about endangered animals. Explore many different species to learn all about them! Also, find out how you can help and do your part for the animals. Finally, test yourself with the quiz.</h3>
<div id="Gallery">
<img id="one"src="Rec1.jpg"><img id="ones"src="Square2.jpeg">
<img id="twos" src="Square1.jpeg"><img id="two" id="odd" src="Rec3.jpg">
<img id="three"src="Rec2.jpg"><img id="threes"src="Square3.jpeg">
</div>
</main>
<footer>
<h3>Click on the links to learn more!</h3>
<h4><a href="learn.html">Learn more</a></h4>
<h4><a href="extinction.html">Animal status</a></h4>
<h4><a href="WaysToHelp.html">Ways to help</a></h4>
<h4><a href="QuizYourself.html">Quiz Yourself</a></h4>
</footer>
<script src="home.js"></script>
</body>
</html>
```HTML for Learn More Page
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Learn</title>
</head>
<body>
<div >
<h2 id="first"><a href="learn.html">Learn more</a></h2>
<h2 id="second"><a href="extinction.html">Animal statuses</a></h2>
<h1 align="center"><a href="home.html">GSAL Zoo</a></h1>
<h2 id="third"><a href="WaysToHelp.html">Ways to help</a></h2>
<h2 id="fourth"><a href="QuizYourself.html">Quiz Yourself</a></h2>
</div>
<main>
<h2 align="center"><strong>Endangered animals</strong></h2>
<h3 align="center">Learn all about endangered animals on this page.</h3>
<div >
<h2>The black rhino</h2>
</div>
</main>
<footer>
<h3>Click on the links to learn more!</h3>
<h4><a href="learn.html">Learn more</a></h4>
<h4><a href="extinction.html">Animal status</a></h4>
<h4><a href="WaysToHelp.html">Ways to help</a></h4>
<h4><a href="QuizYourself.html">Quiz Yourself</a></h4>
</footer>
</body>
</html>
```CSS Stylesheet
```
/*Animations*/
@keyframes title {
from {width: 0ch;}
to {width: 8ch;}
}
@keyframes third {
from {width: 0ch;}
to {width: 10ch;}
}
@keyframes first {
from {width: 0ch;}
to {width: 9ch;}
}
@keyframes second {
from {width: 0ch;}
to {width: 13ch;}
}
@keyframes fourth {
from {width: 0ch;}
to {width: 11ch;}
}
body {
font-family: "Comic Sans MS", Helvetica, sans-serif;
background: #FBFF77;
display: flex;
min-height: 100vh;
width: 100vw;
flex-direction: column;
margin: 0;
padding: 0;
}
/*CSS Styling for Nav-Bar and nav-bar titles.*/
.HomeTitle {
font-size: 32px;
font-weight: bold;
display: flex;
justify-content:center;
align-items: flex-end;
}
.HomeTitle:hover::after {
content: "";
width: 0ch;
height: 3px;
background-color: black;
position: absolute;
display: block;
animation-name: title;
animation-duration: 0.5s;
}
.nav {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100vw;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
border-bottom: 4px solid black;
background: #a8ffa3;
z-index: 1;
}
.left-titles {
border-right: 2px solid black;
padding-right: 100px;
display: flex;
justify-content:center;
align-items: flex-end;
font-size: 1.31rem;
}
.right-titles {
border-left: 2px solid black;
padding-left: 100px;
display: flex;
justify-content:center;
align-items: flex-end;
font-size: 1.31rem;
}
#third:hover::after {
animation-name: third;
}
#first:hover::after {
animation-name: first;
}
#second:hover::after {
animation-name: second;
}
#fourth:hover::after {
animation-name: fourth;
}
.left-titles:hover::after {
content: "";
width: 0ch;
height: 3px;
background-color: black;
position: absolute;
display: block;
animation-name: title;
animation-duration: 0.5s;
}
.right-titles:hover::after {
content: "";
width: 0ch;
height: 3px;
background-color: black;
position: absolute;
display: block;
animation-name: title;
animation-duration: 0.5s;
}
/*End of CSS styling for nav-bar*/
a {
text-decoration: none;
color: black;
}
.sub-subtitle {
padding: 8px;
}
#Gallery {
display: grid;
grid-template-colums: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
column-gap: 4px;
row-gap: 4px;
width: 458px;
position: relative;
left: 25em;
top: 5em;
}
.square {
width: 150px;
height: 150px;
border-radius: 5%;
}
.rec {
width: 300px;
height: 150px;
border-radius: 5%;
}
#one {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}
#two {
grid-column: 2 / span 2;
grid-row: 2 / 3;
}
#three {
grid-column: 1 / span 2;
grid-row: 3 / 4;
}
#odd {
width: 304px;
}
#ones {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
#twos {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
#threes {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
main {
position: relative;
top: 7rem;
height: 55rem;
}
footer{
text-align: center;
background: #585338;
width: 100vw;
position: relative;
right: 0.9em;
top: 0.9em;
}
footer h4, footer h4 a, footer h3 {
color: white;
}
.flink:hover {
text-decoration: underline;
}
.org:hover {
text-decoration: underline;
}
```CodePudding user response：
Can you try these
1.Try add padding main div replace main css as
main {
position: relative;
top: 7rem;
height: 55rem;
padding:20px;
}
- for nav css write a height (as wish you want)
.nav {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100vw;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
border-bottom: 4px solid black;
background: #a8ffa3;
z-index: 1;
height:160px;
}
CodePudding user response：
Putting nav items/links into h1/h2/h3/h4 tags is a completely wrong approach to using HTML (google HTML semantics). navigation items usually are organized as li elements inside a ul list, where the li items are defined as inline-blocks (display=inline-block) to make them appear in one line. Those li elements then contain the links (a) which link to other pages on the same website.
To format thonse identically on all pages, use classes which you don't use anywhere else and for which you set up CSS rules in a common stylesheet. If all that tells you nothing, take a basic tutorial in HTML and CSS...