Два элемента navbar, т.е. О нас и Свяжитесь с нами не кликабельны. Как сделать эти элементы панели навигации кликабельными?
и как правильно выровнять один из элементов панели навигации, например Логин , который в данный момент расположен в самой правой части панели навигации. Этот элемент входа имеет выпадающее меню, которое отображается только частично, потому что он расположен в самой правой части.
html {
height: 100%;
}
.navbar-light .navbar-brand {
color: black;
}
body {
background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url(https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80) no-repeat center center fixed;
background-size: cover;
background-position: center;
font-family: catamaran;
}
.center {
text-align: center;
margin: 0 auto;
padding: 5%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.navbar {
height: 45px;
}
h1,
p {
color: black;
}
h2>span {
color: black;
}
@media (max-width:768px) {
h1 {
background-color: #449d44;
}
h2 {
background-color: #449d44;
}
}
@media (min-width:768px) {
h1 {
background-color: skyblue;
}
}
.nav-item active {
text-align: left;
}
#Login {
min-width: 250px;
background-color: rgba(255, 255, 255, 0.7);
padding: 14px 14px 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/technical_landing.css">
<link href="https://fonts.googleapis.com/css?family=Catamaran&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<title>Minimum Bootstrap HTML Skeleton</title>
<!-- -->
<style>
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Technical lab</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class=" collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Sign Up <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Log in <span class="caret"></span></a>
<ul id="Login" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via:
<div class="social-button">
<a href="# class=btn btn-fb"><i class="fa fa-facebook"></i>Facebook</a>
<a href="# class=btn btn-tw"><i class="fa fa-twitter"></i>Twitter</a>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</nav>
<div class="container center">
<div class="row">
<div class="col-md-12">
<h2>
<span class="fa-stack fa-lg">
<i class="far fa-square fa-stack-2x"></i>
<i class="fab fa-twitter-square fa-stack-1x"></i>
</span>
</h2>
<h1>Technical lab is coming soon.</h1>
<p>Waiting is not easy but just wait this time</p>
<button class="btn btn-success btn-lg">
<i class="fas fa-spinner"></i>
<br>Click me</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
</script>
</body>
</html>