CODEWITHSUNDEEP
csstwitter-bootstrap
swipeales
swipeales

Reputation: 127

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;
}

Upvotes: 0

Views: 56

Answers (3)

Saurabh Sonawane
Saurabh Sonawane

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

Sagar Kodte
Sagar Kodte

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

LS_
LS_

Reputation: 7149

Just remove the <header> tag and everything works.

https://jsfiddle.net/oed42opq/

Upvotes: 1

Related Questions