Navbar items are not clickable and nav items at right side are not getting aligned properly
Question
Two navbar items ie About us and Contact us are not clickable. How to make these navbar items clickable?
and how to align one of the navbar item properly ie Login which is currently positioned at rightmost part of the navbar.This login item has dropdown menu which only gets partially displayed because it is situated in rightmost part.
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>
2 answers
solution1
1 ACCPTED 2020-02-16 16:35:46
添加到您的 CSS：
.navbar { z-index: 1;}
.navbar-nav {align-items: center;}
#Login {right: 0; position: absolute; left: unset;}
solution2
0 2020-02-16 17:04:38
I hope you should copy this code and use in your Html file
If Want exact result
or visit this clink for life Demo for the navbar right
.header { min-height: 500px; } .rightNavbar .nav-item .dropdown-menu { position: absolute; right: 0; left: auto; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.4.1/cerulean/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="header"><nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</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="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <ul class="rightNavbar navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Sign Up </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Login </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap left center/right center aligned navbar items not responsive
nav navbar-nav navbar-right dropdown content won't push menu items down on mobile devices
JQuery Mobile navbar list items not vertically aligned
navbar collapse horizontally and display the nav items
Background Color for nav-items on responsive adjustment of navbar in bootstrap 4
Mega Menu items not getting clickable and links not navigating
Getting text of nav items on clicking on them
Listbox items always getting 0 count on server side
Custom menu items are not clickable
how to keep some items left and some items right in bootstrap nav bar?
Related Tags