Solution 1 :

You need to give your href a path like href='/login.html'.

Solution 2 :

Jump to specified file section

If your <a></a> tag has href="..." attribute value starting with hashtag sign (for example #foobar) then it will scroll to the element that has id="foobar".

For example:

<!DOCTYPE html>
<html lang="en">

  <a href="#login">Click on me to go to the "Login" section</a>
  <div id="home" style="font-size: 48px">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <a href="#home">Click on me to go to the "Home" section</a>
  <div id="login">
    Some login div

Jump to specified HTML document

Or, if you want to navigate to different HTML document, try adding some HTML files into the same directory as this document and change your <a></a> tags to this: <a href="./yourFileName.html"></a>, then you have to add yourFileName.html and it will work!

Solution 3 :

You’ve made the “Home” button link to parts of the homepage using the # id selector (which links to a section id on the current page). To link to separate pages, you would have to specify the file.

Input elements should be wrapped in a form that specifies where and how the data will be sent.

<div class="topnav">
  <a class="active" href="home.html">Home</a>
  <a href="Login.html">Login</a>
  <form method="post" action="your_page_here.html">
    <input type="text" placeholder="Search..">

Problem :

The navigation bar on my website:

enter image description here

As you can see on the image of the navigation bar on my website it looks alright but whenever i press login or try to use Search nothing happens, it just stays on the home page and i dont know whats wrong.
I have tried youtube but didnt find a fix for it. i am very new to css and html so it may be a stupid mistake which is why it isnt working but i dont know what i have done wrong

  body {
  background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
  text-align: center;

#main {
  width: 1000px;
  height: 600px;
  background: #000000;
  border-radius: 30px;
  margin: 25px auto;
  border: solid 2px #f2f2f2;
  padding: 10px;

h1 {
  text-align: center;
  font-family: "Calibri";
  font: 24pt;
  color: #f2f2f2;

hr {
  height: 2x;
  color: #f2f2f2;

p {
  font-family: "Calibri";
  font-size: 16pt;
  color: #f2f2f2;
  text-indent: 48px;
  text-align: center;

/*Nav-bar */

.topnav {
  background-color: #000000;
  overflow: hidden;

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: "Calibri"

.topnav a:hover {
  background-color: #d9d9d9;
  color: black;

.topnav {
  background-color: #464646;
  color: white;

.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;

/*Link:Text */

.container {
  position: relative;
  width: 50%;

.container img {
  width: 90%;
  height: auto;
  border-radius: 10px;

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: f2f2f2;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;

.container .btn:hover {
  background-color: black;

.pic-text {
  position: absolute;
  top: 300px;
  left: 30px;
  font-size: 30px;
  color: f2f2f2;
  font-family: "Calibri"
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#Login">Login</a>
  <input type="text" placeholder="Search..">

<div id="main">
    <div class="container">
      <img src="" alt="Area51">
      <button class="btn">Read</button>
      <div class="Pic-Text">Picture Text</div>



Comment posted by isherwood

The navbar markup was above the head tag, which is invalid.

Comment posted by isherwood

Pat, your links have anchor URLs, but those elements don’t exist in the document. What do you expect to happen? And your search box is just a bare input, with no form and no scripting. What do you expect it to do?

Comment posted by j08691

My mistake on the original HTML edit. I wasn’t looking for HTML in the head lol

Comment posted by Raheel Junaid

As I mentioned in my answer as well, you don’t have to include the

Comment posted by pat

thanks i will try this i was thinking it was something like this but i didnt know how to do it