Solution 1 :

In second code you assign font-size: 20px; in body that affect your nav bar and make it big.

Just add font-size:14px; in li a css.

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>

<title>Tourist Destinations In Lithuania</title>

<style>img {display: block;margin: auto;}</style>

<style>
a:visited {
  color: #c72aa2;
}
</style>

<style>
body {
  background-color: #7c677f;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

li a:hover {
  background-color: #111;
}
</style>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #8076a3;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

</head>

<body>

<ul>
  <li><a href="information.html">Home Page</a></li>
  <li><a href="touristdestinations.html">Tourist Destinations</a></li>
  <li><a href="famousplaces.html">Famous Places</a></li>
  <li><a href="historicalsites.html">Historical Sites</a></li>
</ul>
<h1 align="center" style="font-family:verdana;"><br>Tourist Destinations In Lithuania</h1>
<h4 align="center" style="font-family:verdana;"><br><p><abbr title="Lithuania">Lit</abbr></p></h4>
<h2 align="center" style="font-family:verdana;"><br>Vilnius<br><br></h2>


<p align="center">Vilnius, Lithuania’s capital, is known for its baroque architecture, seen especially in its medieval Old Town.<br>
 But the buildings lining this district’s partially cobblestoned streets reflect diverse styles and eras, from the neoclassical Vilnius Cathedral to Gothic St. Anne's Church.<br>
 The 16th-century Gate of Dawn, containing a shrine with a sacred Virgin Mary icon, once guarded an entrance to the original city.<br></p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="images/Vilnus-Lithuania.jpg" style="width:100%">
  <div class="text">Image of Vilnius (1)</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="images/Vilnus-Lithuania2.jpg" style="width:100%">
  <div class="text">Image of Vilnius (2)</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="images/Vilnus-Lithuania3.jpg" style="width:100%">
  <div class="text">Image of Vilnius (3)</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000);
}
</script>

<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

<h2 align="center" style="font-family:verdana;"><br>Trakai Castle<br><br></h2>


<p align="center">Trakai is a lake resort and historically important city that sits close to Vilnius and makes a nice day trip if you are looking to get out of town.<br>
Trakai dates from the 13th century and is also the home of the Trakai Historical National Park that dates from 1991.<br>
 One of the main sights in the city is the Island Castle which is also the host of the Trakai Castle Festival and the entire town is surrounded by pretty water.<br>
 In the wider Trakai region there are some 200 lakes to enjoy during the warmer months.<br></p>
<a href="https://trakaimuziejus.lt/island-castle"><p style="text-align:center">A Link to the Trakai Castle</a>


<img src="images/Trakai_Castle.jpg"alt=”A castle in lithuania” style="width:1005px;height:700px;">


<h2 align="center" style="font-family:verdana;"><br>The Devil’s Museum<br><br></h2>


<p align="center">The Devil’s Museum is found in Kaunas and as you would expect from the name it has a huge collection of art work that depict images of the devil, witches, and a range of other wicked mythological creatures.<br>
You will find over 3,000 different pieces here and visitors can even donate items to the collection.<br>
There are a huge range of works here that use different materials such as ceramics, textiles, and paintings and you can even find other interesting items like pebbles that feature images of the devil.<br></p>


<img src="images/DevilsMuseum.jpg"alt=”The devils museum” style="width:1005px;height:700px;">


<h2 align="center" style="font-family:verdana;"><br>Ginuciai Water Mill<br><br></h2>


<p align="center">Nestled close to Ignalina is the Ginuciai Water Mill which dates from the 19th century and still straddles the waters that travel down to scenic Lake Linkmenas.<br>
In the days of old it would have been used to make flour and produce electricity although now it is a museum that also has a hotel attached.<br>
It is famous for being the only remaining wooden mill in Lithuania and you can still see all of its traditional machinery such as water wheels and mill stones.</p>


<img src="images/Ginuciai-Water-Mill.jpg"alt=”The Ginuciai Water Mill” style="width:1005px;height:700px;">


<p align="right">&copy;Copyright&copy Web Design 2019-2020 -All Rights Reserved.<br>&euro;                        ‎<br>&trade;                           ‎</p> 



<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
  window.history.back();
}
</script>



<input type="button" name="b1" value="Next page" onclick="location.href='famousplaces.html'">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</body>
</html>

Problem :

I will attach 2 different web page codes that i used to create my website also i just want to know why one of my pages has a normal sized nav bar and why the other page has a bigger sized nav bar.
And yes i used https://www.w3schools.com to help me with making the website

This is with the normal sized navbar: https://pastebin.com/gacWNhbK

<!DOCTYPE html>
<html>
<head>
<title>Information About Lithuania</title>
<style>img {display: block;margin: auto;}</style>

<style>
a:visited {
  color: #c72aa2;
}
</style>

<style>
.center {
  text-align: center;
  border: 3px solid #5f5a5c;
}
</style>

<style>
body {
  background-color: #7c677f;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>
<ul>
  <li><a href="information.html">Home Page</a></li>
  <li><a href="touristdestinations.html">Tourist Destinations</a></li>
  <li><a href="famousplaces.html">Famous Places</a></li>
  <li><a href="historicalsites.html">Historical Sites</a></li>
</ul>
<div class="center">
  <strong><h1><p>Information About Lithuania</p></h1></strong>
</div>
<p align="center">Lithuania, officially the Republic of Lithuania, is a country in the Baltic region of Europe.<br>
Lithuania is considered to be one of the Baltic states.<br>
The country is situated along the southeastern shore of the Baltic Sea, to the east of Sweden and Denmark.<br></p>
<h1 align="center" style="font-family:verdana;">Language and Alphabet</h1>
<p align="center">Only two Baltic languages have survived to modern times, and Lithuanian is one of them (Latvian is the other).<br>
Although they seem similar in some aspects, they are not mutually intelligible. <br>
Much of the population of Lithuania speaks Russian, but visitors should refrain <br>
from using it unless it's absolutely needed - Lithuanians would rather hear someone attempt their language. <br>
The Lithuanians also don't mind practicing their English. German or Polish may help in some areas.<br>
Lithuanian language uses the Latin alphabet with some additional letters and modifications.<br></p>
<h1 align="center" style="font-family:verdana;">Religion</h1>
<p align="center">The majority religion of Lithuania is Roman Catholic at 79% of the population.<br>
 Other ethnicities have brought their religion with them,<br>
 such as the Russians with Eastern Orthodoxy and the Tatars with Islam.</p>



<img src="images/LithuaniaInformation.jpg" alt="Image" height="600" width="700">
<p align="right">&copy;Copyright&copy Web Design 2019-2020 -All Rights Reserved.</p>
<input type="button" name="b1" value="Back to Login Page" onclick="location.href='index.html'">
<input type="button" name="b2" value="Next page" onclick="location.href='touristdestinations.html'">

</body>
</html>

This is with the oversized narbar which i dont know how to fix: https://pastebin.com/0m22xWbA

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
</style>

<title>Tourist Destinations In Lithuania</title>

<style>img {display: block;margin: auto;}</style>

<style>
a:visited {
  color: #c72aa2;
}
</style>

<style>
body {
  background-color: #7c677f;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  }
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #8076a3;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

</head>

<body>

<ul>
  <li><a href="information.html">Home Page</a></li>
  <li><a href="touristdestinations.html">Tourist Destinations</a></li>
  <li><a href="famousplaces.html">Famous Places</a></li>
  <li><a href="historicalsites.html">Historical Sites</a></li>
</ul>
<h1 align="center" style="font-family:verdana;"><br>Tourist Destinations In Lithuania</h1>
<h4 align="center" style="font-family:verdana;"><br><p><abbr title="Lithuania">Lit</abbr></p></h4>
<h2 align="center" style="font-family:verdana;"><br>Vilnius<br><br></h2>


<p align="center">Vilnius, Lithuania’s capital, is known for its baroque architecture, seen especially in its medieval Old Town.<br>
 But the buildings lining this district’s partially cobblestoned streets reflect diverse styles and eras, from the neoclassical Vilnius Cathedral to Gothic St. Anne's Church.<br>
 The 16th-century Gate of Dawn, containing a shrine with a sacred Virgin Mary icon, once guarded an entrance to the original city.<br></p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="images/Vilnus-Lithuania.jpg" style="width:100%">
  <div class="text">Image of Vilnius (1)</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="images/Vilnus-Lithuania2.jpg" style="width:100%">
  <div class="text">Image of Vilnius (2)</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="images/Vilnus-Lithuania3.jpg" style="width:100%">
  <div class="text">Image of Vilnius (3)</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000);
}
</script>

<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

<h2 align="center" style="font-family:verdana;"><br>Trakai Castle<br><br></h2>


<p align="center">Trakai is a lake resort and historically important city that sits close to Vilnius and makes a nice day trip if you are looking to get out of town.<br>
Trakai dates from the 13th century and is also the home of the Trakai Historical National Park that dates from 1991.<br>
 One of the main sights in the city is the Island Castle which is also the host of the Trakai Castle Festival and the entire town is surrounded by pretty water.<br>
 In the wider Trakai region there are some 200 lakes to enjoy during the warmer months.<br></p>
<a href="https://trakaimuziejus.lt/island-castle"><p style="text-align:center">A Link to the Trakai Castle</a>


<img src="images/Trakai_Castle.jpg"alt=”A castle in lithuania” style="width:1005px;height:700px;">


<h2 align="center" style="font-family:verdana;"><br>The Devil’s Museum<br><br></h2>


<p align="center">The Devil’s Museum is found in Kaunas and as you would expect from the name it has a huge collection of art work that depict images of the devil, witches, and a range of other wicked mythological creatures.<br>
You will find over 3,000 different pieces here and visitors can even donate items to the collection.<br>
There are a huge range of works here that use different materials such as ceramics, textiles, and paintings and you can even find other interesting items like pebbles that feature images of the devil.<br></p>


<img src="images/DevilsMuseum.jpg"alt=”The devils museum” style="width:1005px;height:700px;">


<h2 align="center" style="font-family:verdana;"><br>Ginuciai Water Mill<br><br></h2>


<p align="center">Nestled close to Ignalina is the Ginuciai Water Mill which dates from the 19th century and still straddles the waters that travel down to scenic Lake Linkmenas.<br>
In the days of old it would have been used to make flour and produce electricity although now it is a museum that also has a hotel attached.<br>
It is famous for being the only remaining wooden mill in Lithuania and you can still see all of its traditional machinery such as water wheels and mill stones.</p>


<img src="images/Ginuciai-Water-Mill.jpg"alt=”The Ginuciai Water Mill” style="width:1005px;height:700px;">


<p align="right">&copy;Copyright&copy Web Design 2019-2020 -All Rights Reserved.<br>&euro;                        ‎<br>&trade;                           ‎</p> 



<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
  window.history.back();
}
</script>



<input type="button" name="b1" value="Next page" onclick="location.href='famousplaces.html'">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</body>
</html>

Just as a reminder i do not take any of this work as my own since i used W3Schools to help.
Hope someone can help me.

Comments

Comment posted by bron

Two things to change the button size in the navbar. First, play with

Comment posted by Fredrick

With the amount of code i have i could not see that one part haha. Thank you so much.

By

Leave a Reply

Your email address will not be published. Required fields are marked *