you’re using bootstrap in index.html but you’re not using it in signup.html, that’s what is causing your navbar to go “whacky”
Btw, you should not be repeating the same css from one page to the other, try to do reusable code, it makes no sense to copy and paste all that navbar css from index to signup
edit: here is the sandbox I used to play around with your code sandbox, view the result with this link
Navbars…ugh. My code is supposed to be displaying a navbar on two separate pages but the margin is way too much to the right on the signin page. It looks very different from the home page. For reference, I have two separate files: one for the home page with style.css, and one for the login form with signin.css. The code for the navbar is the same for each but they’re displaying very different results on the two pages.
So what I’m wondering is, why is it like this and what can be done to fix it? Here’s my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="icon" href="https://drive.google.com/uc?id=15DKhs1-y_c6C5TXfbQ1es1cJYwItjKkQ" sizes="32x32" type="image/png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<!-- NAVBAR -->
<nav>
<input id="nav-toggle" type="checkbox">
<!-- <div class="logo">name</div> -->
<a href="index.html"><img class="logo" src="tsLogo.png"></a>
<ul class="links">
<li><a href="#home">Home</a></li>
<li><a href="#problem">Problem</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#about">About</a></li>
<li><a href="signin.html">Login</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
</body>
</html>
style.css:
html {
scroll-behavior: smooth;
}
body {
/*background-color: #00BFFF;*/
width: 100%;
}
/* NAVBAR */
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Poppins", sans-serif;
padding: 0 5%;
height: 100px;
background-color: white;
display: flex;
}
nav .logo {
float: left;
text-decoration: none;
text-decoration-line: none;
height: 60px;
width: 180px;
margin-top: 2vh;
display: block;
margin-left: 2vw;
margin-right: auto;
margin-bottom: 3vh;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
nav .links li {
list-style: none;
}
nav .links a {
font-family: "Poppins", sans-serif;
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #FF8718;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #FF8718;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 768px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
.youtube-link {
position: fixed;
left: 20px;
bottom: 20px;
color: #000;
text-decoration: none;
font-size: 12px;
}
signin.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="signin.css" />
<title>Login & Sign up Form</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<!-- NAVBAR -->
<nav>
<input id="nav-toggle" type="checkbox">
<!-- <div class="logo">name</div> -->
<a href="index.html"><img class="logo" src="tsLogo.png"></a>
<ul class="links">
<li><a href="index.html#home">Home</a></li>
<li><a href="index.html#problem">Problem</a></li>
<li><a href="index.html#features">Features</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="signin.html">Login</a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
</body>
</html>
signin.css:
/* NAVBAR */
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
font-family: "Poppins", sans-serif;
padding: 0 5%;
height: 100px;
background-color: white;
display: flex;
}
nav .logo {
float: left;
text-decoration: none;
text-decoration-line: none;
height: 60px;
width: 180px;
margin-top: 2vh;
display: block;
margin-left: 2vw;
margin-right: auto;
margin-bottom: 3vh;
}
nav .links {
float: right;
padding: 0;
margin: 0;
width: 60%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
/* why is this wierd effect happening? */
}
nav .links li {
list-style: none;
}
nav .links a {
font-family: "Poppins", sans-serif;
display: block;
padding: 1em;
font-size: 16px;
font-weight: bold;
color: #FF8718;
text-decoration: none;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background-color: #FF8718;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 960px) {
nav .logo {
float: none;
width: auto;
justify-content: center;
}
nav .links {
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
background-color: rgba(0,0,0,.8);
overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
}
nav .links a {
font-size: 20px;
}
nav :checked ~ .links {
bottom: 0;
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
}
.youtube-link {
position: fixed;
left: 20px;
bottom: 20px;
color: #000;
text-decoration: none;
font-size: 12px;
}
Thank you very much! I implemented the bootstrap and it fixed the navbar 🙂 Really appreciate the advice!
Also, looks like you are loading 2 different versions of jquery and bootstrap?