<!DOCTYPE html>
<html>
<head>

  
	<title>Heder File</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="heder.css">
</head>
<body id="main" style="background-color: #5499C7    ;">
  <div  id="navbar">
    <h3 id="looo" class="text-red"><b>Event Management System </b></h3>
      <a  id="logo"  href="index.php" >Home</a>
      <a id="logoo" href="about.php">About</a>
     
      <a id="lo" href="Galary.php">Gallery</a>
      <a  id="lgg"  href="contact.php">Contact</a>
      <a id="lg"  href="event2.php"><i class="fa fa-sign-in"  style="font-size:24px" ></i> Login</a>
      <a id="loo"  href="signin.php"><i class="fa fa-user" style="font-size:24px"></i> Sign Up </a> 
        </br>
  </div> 
<script type="text/javascript">
  
          window.onscroll = function() {scrollFunction()};

          function scrollFunction() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50)    
        {
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("logo").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("logoo").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("log").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("lo").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("lgg").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("loo").style.fontSize = "25px";
          document.getElementById("navbar").style.padding = "10px 5px";
          document.getElementById("lg").style.fontSize = "25px";
        } else 
        {
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("logo").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("logoo").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("log").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("lo").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("lgg").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("loo").style.fontSize = "27px";
          document.getElementById("navbar").style.padding = "10px 10px";
          document.getElementById("lg").style.fontSize = "27px";
        }
      }



</script>




</body>
</html>