headerPerent.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/style_Zahin.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>

  <body>
    <div class="topnav1 topnav2" id="myTopnav">
      <img id="logo" src="logo.png" />
      <a class="logout" href="logout.php">Log Out</a>
      <a class="edit" href="updatePass.php">Update Password</a>
      <a class="edit" href="requestedtutorinfo.php">Bookings</a>
      <a class="edit" href="parentEdit.php">Edit Profile</a>
      <a class="home" href="Welcomeparent.php">Home</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>

    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav2") {
          x.className += " responsive";
        } else {
          x.className = "topnav2";
        }
      }
    </script>
  </body>
</html>