'How to make top nav work that doesn't work

I wanted to ask you for help because the Top Nav does not work in my index.html file, which is an external file anchored to each page of the site. Unfortunately, the buttons of the Top Nav do not work in the index.html file and should refer to other pages that I have already created. Therefore the connection does not work. Could any of you help me ?? Thank you so much!!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/TopNav.css">
<script src="https://kit.fontawesome.com/e8f8804c71.js" crossorigin="anonymous"></script>
<title>Top Nav</title>
</head>
<body>


<div class="topnav">
  <a class="active" href="#home">Homepage</a>
  <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BestSellers.html">Best Sellers</a>
  <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/CustomOrders.html">Custom Order</a>
  <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/AboutUs.html">About Us</a>
  
  <div class="topnav-right">
  <a href="#"><i class="fa-brands fa-instagram"></i></a>
  <a href="#"><i class="fa-brands fa-linkedin-in"></i></a> 
  <a href="#"><i class="fa-brands fa-facebook-f"></i></a> 
  <a href="#"><i class="fa-solid fa-cart-shopping"></i></a> 
  <a href="#"><i class="fa-solid fa-user"></i></a>  
  </div>

</div>



</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/style.css">


<title>flowerbee</title>


</head>
<body>

<!-- topnav======================================== -->

 <div class="topnav">
 <div style="position:relative;padding-top:0%; bottom: 0;">
    <iframe src="TopNav.html" width="100%" height="55" scrolling="no"></iframe>
    <style>iframe {border: none}</style>
  </div>
  </div>



<div class="section">
  <div class="slider">
    <div class="container slidercontent">
      <h1 class="hero">flowerbee</h1>
      <h2 class="hero">Flower delivery</h2>
    </div>
  </div>
</div>

<!-- galleria prodotti======================================== -->

<div class="section bg">
  <div class="container">
    <h1>Product gallery</h1>
    <h2>all our bouquets!</h2>
    
<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BigBang.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang1.jpg" alt="Big Bang" width="600" height="600">
    </a>
    <div class="desc1">Big Bang</div>
    <div class="desc">starting from 33.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Iris.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Iris/Iris1.jpg" alt="Iris" width="600" height="400">
    </a>
    <div class="desc1">Iris</div>
    <div class="desc">starting from 35.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Sundays.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Sundays/Sundays1.jpg" alt="Sundays" width="600" height="400">
    </a>
    <div class="desc1">Sundays</div>
    <div class="desc">starting from 35.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Lilac.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Lilac/Lilac1.jpg" alt="Lilac" width="600" height="400">
    </a>
    <div class="desc1">Lilac</div>
    <div class="desc">starting from 29.00 €</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Onirium.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Onirium/Onirium1.jpg" alt="Onirium" width="600" height="600">
    </a>
    <div class="desc1">Onirium</div>
    <div class="desc">starting from 33.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Zanni.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Zanni/Zanni1.jpg" alt="Zanni" width="600" height="400">
    </a>
    <div class="desc1">Zanni</div>
    <div class="desc">starting from 39.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Suite.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Suite/Suite1.jpg" alt="Suite" width="600" height="400">
    </a>
    <div class="desc1">Suite</div>
    <div class="desc">starting from 39.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BoraBora.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/BoraBora/BoraBora1.jpg" alt="BoraBora" width="600" height="400">
    </a>
    <div class="desc1">Bora Bora</div>
    <div class="desc">starting from 42.00 €</div>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Moonwalk.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Moonwalk/Moonwalk1.jpg" alt="Moonwalk" width="600" height="600">
    </a>
    <div class="desc1">Moonwalk</div>
    <div class="desc">starting from 33.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Birdy.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Birdy/Birdy1.jpg" alt="Birdy" width="600" height="400">
    </a>
    <div class="desc1">Birdy</div>
    <div class="desc">starting from 51.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Manila.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Manila/Manila1.jpg" alt="Manila" width="600" height="400">
    </a>
    <div class="desc1">Manila</div>
    <div class="desc">starting from 35.00 €</div>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
    <a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/OceanEyes.html">
      <img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/OceanEyes/OceanEyes1.jpg" alt="OceanEyes" width="600" height="400">
    </a>
    <div class="desc1">OceanEyes</div>
    <div class="desc">starting from 42.00 €</div>
  </div>
</div>



<!-- recensioni======================================== -->

<div class="section">
  <div class="container">
    <h1>Check out our reviews</h1>
    <div class="col three">
      <h1 class="feature side">Sarah   ★★★★★</h1></h1>
      <p class="side">Very satisfied! many compliments to the staff !! Highly recommended.</p>
    </div>
    <div class="col three">
      <h1 class="feature side">Liam   ★★★★★</h1>
      <p class="side">Great Service!!!</p>
    </div>
    <div class="col three">
      <h1 class="feature side">Olivia   ★★★★☆</h1>
      <p class="side">Everything perfect, The flowers were received as expected! Thank you. </p>
    </div>
    <div class="group margin"></div>
    <div class="col three">
      <h1 class="feature side">Noah   ★★★★★</h1>
      <p class="side">The flowers were delivered in a timely manner and were very beautiful.</p>
    </div>
    <div class="col three">
      <h1 class="feature side">Emma   ★★★★☆</h1>
      <p class="side">The flowers were of excellent quality and respected the one seen in the photo. Precise delivery. I had a great time I recommend it.</p>
    </div>
    <div class="col three">
      <h1 class="feature side">Charlotte   ★★★★☆</h1>
      <p class="side">Excellent service, delivery was made when I wanted even if ordered a little late.</p>
    </div>
    <div class="group margin"></div>
  </div>
</div>

 <div class="footer">
 <div style="margin-bottom: -450px; margin-left: -150px;">
    <iframe src="Footer.html" width="1500" height="750" scrolling="no" style="align-content: center;"></iframe>
    <style>iframe {border: none}</style>
  </div>
  </div>




</body>
</html>
html


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions