swipeales swipeales - 5 months ago 30
CSS Question

cant click on hyperlinks

why can't i click on register, forgot pass, checkbox links here? and screen is collapsed so drag it to increase width for styling. Anyone knows why does it collapse like that even though it's in bootstrap container?

jsfiddle: https://jsfiddle.net/germfpko/

<header>
<div class="container">
<img class="logo" src="" alt="lol">

<form class="login-form">
<input type="text" placeholder="Email Adress">
<input type="password" placeholder="Password">

<button type="submit" class="btn btn-primary">Login</button>
<br>
<input type="checkbox" name="remember"><span style="color:#FFF">Remember me</span>
<div class="login-options">
<ul>
<li><a href="#">Reg</a></li>
<li><a href="#">Forgot pass?</a></li>
</ul>
</div>
</form>
</div>
<div class="navbar">
<div class="container">
<ul>
<li><a href="#">!!</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</header> <!--end of header-->


css

header{
background-color: #2C2C2C;
color: #FFF;
padding-top: 20px;
}

header .login-form{
position: absolute;
top: 30px;
right: 300px;
color: black;
}

header a{
text-decoration: none;
color: #FFF;
}

header li{
list-style-type: none;
}

header img.logo{
float: left;
}

.login-form input[type="text"]{
height: 30px;
border: 2px solid #ffe6e6;
border-radius: 3px;
}

.login-form input[type="text"]:focus{
border: 2px solid #ffe6e6;
}

.login-form input[type="password"]{
height: 30px;
border: 2px solid #ffe6e6;
border-radius: 3px;
}

.login-form input[type="password"]:focus{
border: 2px solid #ffe6e6;
}

.login-form .login-options{
position: relative;
bottom: 20px;
left: 230px;
color: #FFF;
}

.navbar{
padding-top: 70px;
}

.navbar ul {
list-style-type: none;
}

.navbar li {
display: inline-block;
width: auto;
font-size: 18px;
padding-right: 30px;
}

.navbar li a {
display: block;
color: #FFFFFF;
text-decoration: none;
}

.navbar li a:hover{
background-color: #ff8566;
}

Answer

header{
	background-color: #2C2C2C;
	color: #FFF;
	padding-top: 20px;
}

header .login-form{
	position: absolute;
	top: 30px;
	right: 300px;
	color: black;
    z-index:9999;
}

header a{
	text-decoration: none;
	color: #FFF;
}

header li{
	 list-style-type: none;
}

header img.logo{
	float: left;
}

.login-form input[type="text"]{
	height: 30px;
	border: 2px solid #ffe6e6;
	border-radius: 3px;
}

.login-form input[type="text"]:focus{
	border: 2px solid #ffe6e6;
}

.login-form input[type="password"]{
	height: 30px;
	border: 2px solid #ffe6e6;
	border-radius: 3px;
}

.login-form input[type="password"]:focus{
	border: 2px solid #ffe6e6;
}

.login-form .login-options{
	position: relative;
	bottom: 20px;
    left: 230px;
    color: #FFF;
  
}
.navbar{
	padding-top: 70px;
}

.navbar ul {
	list-style-type: none;
}

.navbar li {
	display: inline-block;
	width: auto;
	font-size: 18px;
	padding-right: 30px;
}

.navbar li a {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
}

.navbar li a:hover{
	background-color: #ff8566;
}
<header>
		<div class="container">
			<img class="logo" src="" alt="lol">
			
			<form class="login-form">
				<input type="text" placeholder="Email Adress">
				<input type="password" placeholder="Password">

				<button type="submit" class="btn btn-primary">Login</button>
				<br>
				<input type="checkbox" name="remember"><span style="color:#FFF">Remember me</span>
				<div class="login-options">
					<ul>
						<li><a href="#">Reg</a></li>
						<li><a href="#">Forgot pass?</a></li>
					</ul>
				</div>
			</form>
		</div>
		<div class="navbar">
			<div class="container">
				<ul>
					<li><a href="#">!!</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
	</header> <!--end of header-->

just add below css

header .login-form{z-index:9999;}
Comments