Hello,
How to add Forgot Password under login textboxes in Navbar
I have two issues on my test site, they are:
1. How do I add forgot password link label under the Login textboxes (User Email and Password) in Navbar
2. When I minimized my browser window the navbar is collapse and responsive but the textboxes and button appear to be horizontal, where I want them to be vertical on a responsive view and horizontal in a full screen window.
Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Home</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/StyleSheet.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
height:auto;
margin-top:0%;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
.mySlides {
position: relative;
max-width: 100%; /* Maximum width */
margin: 0 auto; /* Center it */
}
.mySlides .contentt {
position: absolute; /* Position the background text */
bottom: 0; /* At the bottom. Use top:0 to append it to the top */
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.3); /* Black background with 0.5 opacity */
color: #f1f1f1; /* Grey text */
width: 100%; /* Full width */
padding: 20px; /* Some padding */
}
</style>
<style type="text/css">
.dropdown:hover {
display: block;
}
.navbar{
width:100%;
position:fixed!important ;
top:0px;
}
.footer {
width:100%;
position:fixed!important;
}
.container2{
width:100%;
}
.container{
width:100%;
}
.title {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top:0%;
}
.desc {
margin-bottom: 50px;
margin-top: 12px;
line-height: 1.7;
}
@media(min-width:992px){
.col-md-6:not(:first-child) {
}
.col-md-6:not(:last-child) {
border-right:1px solid #200662;
border-left:1px;
}
.form-horizontal {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top:0%;
}
}
</style>
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
</head>
<body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:no-display;">
<form id="form1" runat="server">
<div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; font-family: Nunito;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #00003D; border-color:white; border-width:1px; color: white">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color: white; margin-top:-3%; font-family:Goudy Old Style;"><span><img alt="LOGO22" src="images/LOGO22.png" height="40"/> </span>TracX</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="Home.aspx" style="color: #FFFFFF; Font-Size:Large; border-right: solid 1px #555; border-left: solid 1px #111;"> Home</a></li>
<li><a href="AcustomID.aspx" style="color: #FFFFFF;Font-Size:Large; border-right: solid 1px #555; border-left: solid 1px #111;"> About</a></li>
<li><a href="AcustomID.aspx" style="color: #FFFFFF;Font-Size:Large; border-right: solid 1px #555; border-left: solid 1px #111;">Mobile Phones</a></li>
<li><a href="AcustomID.aspx" style="color: #FFFFFF;Font-Size:Large; border-right: solid 1px #555; border-left: solid 1px #111;">Product</a></li>
<li class="login-container">
<asp:TextBox ID="TextBox2" runat="server" Placeholder="User Email"></asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server" Placeholder="Password" TextMode="Password"></asp:TextBox>
<asp:Button ID="Button1" runat="server" class="btn btn-primary navbar-btn" Text="Login" style="font-size:smaller" />
<button type="button" runat="server" class="btn btn-primary navbar-btn" data-toggle="modal" style="font-size:smaller" data-target="#MyModal">New User</button>
<br />
<asp:Label ID="Labelresponse" runat="server" Font-Size="x-small" margin-top="0" ForeColor="White"></asp:Label>
</li>
</ul>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>