You need to give your href a path like href='/login.html'.
Solution 1 :
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">
<head>
<title>Document</title>
</head>
<body>
<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.
</div>
<a href="#home">Click on me to go to the "Home" section</a>
<div id="login">
Some login div
</div>
</body>
</html>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..">
</form>
</div>Problem :
The navigation bar on my website:
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 a.active {
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>
<div id="main">
<h1>Title</h1>
<hr>
<p>Text
<div class="container">
<img src="https://storage.googleapis.com/afs-prod/media/fc473ecb7778468aa0d454a71839c2ab/3000.jpeg" alt="Area51">
<button class="btn">Read</button>
<div class="Pic-Text">Picture Text</div>
</div>
</div>Comments
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