Twitter Bootstrap Question posted in

Navbar items are not clickable and nav items at right side are not getting aligned properly-Twitter bootstrap

Two navbar items i.e. 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 i.e. 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/[email protected]/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>
Tags:

2

Answers


  1. 0

    Add to your CSS:
    .navbar { z-index: 1;}
    .navbar-nav {align-items: center;}
    #Login {right: 0; position: absolute; left: unset;}

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search