I'm a beginner here, I've got what I believe is a simple problem which I don't know how to solve. Basically i'm making a responsive website, my problem right now is that I can't make my navbar correctly responsive on the other parts of the websites besides my index.html (which works fine).
I've used the code from w3schools in order to create my navbar.
As I said it works on my index file. But when I'm on my "news page" It doesn't work correctly. It rezises itself but it says Home on the navbar to the left. How do I make it so that it says news on the news page, starts off news and not the home page? (And for Contact, About aswell) Much thanks! Sorry if this was a stupid question. This is my first time trying to make a responsive website!
Here is the code aswell (from the link at w3 schools):
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire