As I delve into the world of HTML, CSS, and JS, I encountered a peculiar error while using Bootstrap that seems to be affecting the links in my navigation bar.
Here's the CSS I've been using: https://pastebin.com/naVZuzaG
And here's the code snippet for the contact page featuring a Bootstrap Forms-component for testing purposes: https://pastebin.com/dGGPxhNT
On line 34, there's a field for entering your email that seems to be causing the navigation links to display strangely (they appear from the top right when the page loads):
<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" required/>
Curiously, this issue only arises when the page is accessed online; when viewed locally on my machine, this error doesn't manifest. Any insights on why this occurs and how to prevent it would be greatly appreciated.
/* CSS styling for the top navigation bar */
.topnav {
overflow: hidden;
background-color: black;
}
.topnav img {
position: relative;
float: left;
padding-top: 7px;
padding-left: 20%;
}
.topnav ul {
list-style: none;
padding: 0px 20%;
}
/* Additional styling for links in the navbar below */
.activelink {
background-color: white;
color: black !important;
}
.navlist a, select {
font-family: 'Alata', sans-serif;
color: white;
float: right;
padding: 16px 20px;
text-align: center;
text-transform: uppercase;
transition-timing-function: linear;
transition-duration: 600ms;
}
.navlist a:hover {
background-color: white;
color: black;
}
/* Main body and content styling below */
body {
height: 100%;
width: 100%;
margin: 0;
background-color: white;
}
.page-container {
position: relative;
min-height: 100vh;
}
.maincontent {
padding: 30px;
}
article {
width: 40%;
margin-left: auto;
margin-right: auto;
}
article small {
text-align: center;
padding-top: 10px;
}
/* Header styles */
h1 {
font-family: 'Alata', sans-serif;
text-align: center;
padding-top: 40px;
padding-bottom: 20px;
}
h2, h3, h4, h5, h6 {
font-family: 'Alata', sans-serif;
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
}
/* Footer styles below */
footer {
position: absolute;
height: 3rem;
bottom: 0;
width: 100%;
background-color: black;
}
footer p {
font-family: 'Alata', sans-serif;
color: white;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* Additional styling for the contact form */
label {
font-family: 'Alata', sans-serif;
}
.form-control {
max-height: 300px;
}
.btn-primary {
background-color: black;
}
.btn-primary:hover {
background-color: white;
color: black;
border-color: rgb(83, 80, 80);
}
/* Extra styling for gallery images */
#imgg {
display: block;
margin-left: auto;
margin-right: auto;
}<!DOCTYPE html>
<html>
<!-- HTML header -->
<head>
<meta charset="utf-8">
<!-- Links to stylesheets and title -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Alata&display=swap">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Testsite</title>
</head>
<body>
<div class="page-container">
<header class="header">
<nav class="topnav">
<a href="index.html"><img src="images/smallogo.png" alt="Logo that says Desert Water Corp" class="logo"></a>
<ul class="navlist">
<li><a class="activelink" href="contact.html">Contact</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<div class="maincontent">
<h1>Get in touch</h1>
<article>
<form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c2c5cfc1c1c9c5cdc8e4c2c5cfc1c1c9c5cdc88ac7cbc9">[email protected]</a>" method="post" enctype="text/plain" class="form-container">
<div class="form-group">
<label for="email-address">Email address</label>
<input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp" required/>
<small id="emailHelp" class="form-text text-muted"><em>We will never share your email with anyone else.</em></small>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="subject" rows="13" placeholder="Write your message here..."></textarea>
</div>
</form>
<button type="submit" class="btn btn-primary">Submit</button>
</article>
</div>
<footer id="footer">
<p>Copyright © 2020 Desert Water Corp</p>
</footer>
</header>
</div>
</body>
</html>