问题
So I created my Responsive Nav Bar and when it is in mobile, it is not exactly how I picture it. I got the active page "title" and what I want it to do is if I click on to the next page, the top left title will change. Here is where I got the idea from. https://www.w3schools.com/howto/howto_js_topnav_responsive.asp.
Now here is what my pages look like now.
When I go to another page, it is not green anymore the "active" title page. And the title is still named home. That's another issue that w3schools does not tell you about when you switch to another (dot)html page.
Also I want the Home Tab to bring underneath the hamburger icon bar to give it a clean look. Like this for example.
Here is my codes and see what you can do to fix my issue.
index.html
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}.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 a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
.summary {
min-height: 75vh;
max-width: 2000px;
display: flex;
align-items: center;
justify-content: center;
}
.profilePicture {
padding: 2rem;
}
.profileSummary {
max-width: 400px;
}
@media screen and (max-width: 800px) {
.summary {
flex-direction: column;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="script.js"></script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="about.html">About Me</a>
<a href="portfolio.html">Portfolio</a>
<a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="summary">
<div class="profilePicture">
<img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;">
</div>
<div class="profileSummary">
Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
</div>
</div>
</body>
</html>about.html
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}.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 a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
.summary {
min-height: 75vh;
max-width: 2000px;
display: flex;
align-items: center;
justify-content: center;
}
.profilePicture {
padding: 2rem;
}
.profileSummary {
max-width: 400px;
}
@media screen and (max-width: 800px) {
.summary {
flex-direction: column;
}
}
/* Nav Styling Ends Here */
.skillResponsive {
max-width: 1000px;
margin: 0 auto;
padding: 0 15px;
}
.container {
background-color: #ddd;
}
.skills {
text-align: right;
padding: 10px;
color: white;
}
.html {
width: 60%;
background-color: #00e64d;
}
.css {
width: 60%;
background-color: #4da6ff;
}
.sql {
width: 10%;
background-color: #cc66ff;
}
.pc {
width: 75%;
background-color: #ff5050;
}
.trouble {
width: 75%;
background-color: #ff8533;
margin-bottom: 45px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="script.js"></script>
</head>
<body>
<!-- The navigation menu -->
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="about.html" class="active">About Me</a>
<a href="portfolio.html">Portfolio</a>
<a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<h1 style="text-align: center;">
About me
</h1>
<div class="desc">
<p style="background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; text-align: center; font-size: 22px;">
I am currently attending Pikes Peak Community College towards my Associate of Applied Science Degree in Computer Information Systems.
</p>
</div>
<h2 align="center">My Programming Skills</h2>
<div class="skillResponsive">
<!--Div for Skill Bar-->
<p>HTML</p>
<div class="container">
<div class="skills html">60%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">60%</div>
</div>
<p>SQL (Currently taking "Intro to SQL" at college this semester for a Database certificate)</p>
<div class="container">
<div class="skills sql">10%</div>
</div>
<h2 align="center">Computer Skills</h2>
<p>Build Computer</p>
<div class="container">
<div class="skills pc">75%</div>
</div>
<p>
The other 25% would have to be cable management, watercooling, and trying to figure which hardware is recommended to be place first to make cable management a priority to give it a good airflow. See the Portfolio page for a picture of my first gaming
PC.
</p>
<p>Software Troubleshooting</p>
<div class="container">
<div class="skills trouble">90%</div>
</div>
</div>
<h2 style="text-align: center; background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; margin-left: 100px; margin-right: 100px;">
My College Degree Progress
</h2>
</body>
</html>I could post more (dot)html files but I think you get the idea.
回答1:
In "mobile" mode, I don't think that's supposed to be a title that says "Home". I think it's supposed to be a button that the user can click to take them to the homepage.
As for your first question, I believe you're asking how can you highlight the "active tab" in the navbar. In other words, if you're on the "About" page, you want "About" to be highlighted, and not "Home".
One way to do this would be:
First, on each page's <body> tag, add an id. For example, on index.html, you could have <body id="home">. For about.html, you could have <body id="about">. Do this for each of your pages. Make sure the id values are unique.
Second, on each of the navbar links, give them an id as well. For example, your navbar markup might be changed to look something like this:
<div class="topnav" id="myTopnav">
<a href="index.html" id="nav_home" class="active">Home</a>
<a href="about.html" id="nav_about">About Me</a>
<a href="portfolio.html" id="nav_portfolio">Portfolio</a>
<a href="contact.html" id="nav_contact">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
Again, this needs to be done on each of your pages.
Third, add the style rule for all of these elements to your main CSS file. This only needs done once since your other pages reference the same CSS file. The ruleset might look something like this:
#home #nav_home,
#about #nav_about,
#portfolio #nav_portfolio,
#contact #nav_contact {
background-color: #4CAF50;
color: white;
}
Finally, either remove the ruleset for .active from your main CSS file; or remove the class="active" from the link in your index.html file. If you don't, then the "Home" page will always be highlighted as active, even when it's not.
Here are two fiddles to demonstrate this. You'll notice the CSS and JS is the same in both. The only difference is the HTML, since they represent the two different pages.
Your Home Page: https://jsfiddle.net/7ynbfax4/1/
Your About Page: https://jsfiddle.net/7ynbfax4/2/
For your second question, I'd suggest creating another post on here. Generally we try to keep one question to a post, just so it's easier for people to find answers in the future. But to get you on the right track, you're going to need to change the CSS in your media query for the mobile screen widths.
来源：https://stackoverflow.com/questions/54396946/nav-bar-incorrect-title-when-responsive-and-underneath-menu-bar