Reputation: 127
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;
}
Upvotes: 0
Views: 56
Reputation: 951
You are not able to click on hyperlinks because, you have set the position of
.login-form to absolute; and set the top-padding of .navbar to 70px;
It will work when you remove padding-top, just insert margin-top there, like
.navbar{
margin-top: 70px;
}
Upvotes: 0
Reputation: 3815
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;}
Upvotes: 3
Reputation: 7149
Just remove the <header>
tag and everything works.
https://jsfiddle.net/oed42opq/
Upvotes: 1