The navigation bar links are unresponsive and the right-aligned navigation items are not displaying correctly

Why are the navbar items "About us" and "Contact us" not clickable? How can we make these items clickable?

Also, how do we properly align the navbar item "Login" which is currently positioned at the rightmost part of the navbar? The dropdown menu within the login item only partially displays because it is located on the far right.

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="SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="  collapse navbar-collapse" id="ConstraintMakerponsiveContent">
      <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="#queueReusableCellntent" aria-controls="SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="VisualStyleBackColortent">
        <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/@popperjs/core@2.7.5/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>

jqueryhtmlcssbootstrap-4

Answer №1

Include the following in your CSS:
.navigation-bar { z-index: 1;}

.navigation-bar-nav {align-items: center;}

#Signin {right: 0; position: absolute; left: unset;}

Answer №2

Feel free to use this code snippet in your HTML file

If you want precise results,

or follow this link for a live Demo of the right navbar

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting a JSON object into a jQuery select array

Looking for a way to convert a JSON object into a key-value array? Check out the example provided in this JSFiddle link, where the stringify output is shown. The goal is to parse the JSON object so that it can be stored in a select box. The desired result ...

javascriptjqueryarraysjson

Enhancing the appearance of each letter within a word

I am currently working on styling the word "Siteripe". Each letter should have a different color, just like it is shown on this website. I have successfully styled only the first letter using the following CSS code: #namer:first-letter { color:#09C; f ...

csscss-selectors

How to center align a <p> element along with a <select> element

Having some trouble while redesigning a simple survey page. I want to center-align the p tag with the select tag without using display:flex inside the .combobox class. The goal is to have them on the same line and still be centered. The current layout loo ...

htmlcss

How come this isn't growing the way I had hoped for?

Currently, I am working on a small jQuery script that is designed to fetch and print a specific month from a PHP file. Here is my code snippet: var count = 0; $(".nextMonth").click( function(event) { event.preventDefault(); count++; $("#r ...

phpjavascriptjqueryajaxget

When the beforeSend function of jQuery AJAX returns false, it triggers the $.ajaxError event

function load() { var url = buildUrl(null, true); $.ajax(url, { cache: true, dataType: 'json', beforeSend: function(xhr) { if (typeof plugin.cache[url] != ...

jqueryajax

Using Jquery in combination with Bootstrap modal and PHP for website

Upon submission of a form with numerous fields, I aim to display a bootstrap modal popup that prompts the user with a question before data is saved in the database. The user can respond with either "yes" or "no", leading to different actions being taken ba ...

phpjqueryajaxtwitter-bootstrapmodal-dialog

Change UL to a JSON format

I am attempting to transform an entire unordered list (UL) and its child elements into a JSON object. Here is the approach we took: function extractData(element) { element.find('li').each(function () { data.push({ "name": $(this).fi ...

javascriptjqueryjson

What is a more efficient method for connecting to the pageshow event in jQuery Mobile?

Whenever a page is displayed, whether through regular loading or jQuery Mobile's AJAX navigation, I need to call a specific function. My current code is functional, but I believe there may be a more elegant solution available. In the footer of my pag ...

jqueryajaxdelegatesjquery-mobile

Using jQuery to trigger two functions on a click event

I have two functions that I want to apply to the same click event. Initially, I had both of them inside the click function and noticed that while the image toggle worked every time, the show/hide toggle ("optionToggle") only worked the first time. However, ...

javascriptjqueryfunctionclick

Change the input field font style in AngularJS

Check out this Plunker link for validation of input field: http://plnkr.co/edit/iFnjcq?p=preview The validation only allows numbers to be entered and automatically adds commas. My query is, if a negative number is entered in the field, how can I change th ...

javascriptjquerycssangularjsvalidation

What could be preventing this src tag from loading the image?

Here is the file structure of my react project Within navbar.js, I am encountering an issue where the brand image fails to load from the Assets/images directory. import '../../Assets/Css/Navbar.css'; import image from '../../Assets/Images/a ...

javascripthtmlcssreactjsbootstrap-5

invoke a function upon successful completion of an ajax call in a datatable

Can we trigger a JavaScript function after a successful AJAX call in a datatable? Here is the code I am attempting to use: var dataTable = $('#app-config').dataTable( { "bAutoWidth": false, ...

javascriptjqueryajaxdatatables

Tips on validating file types using jQuery's Ajax function

I am new to web programming and need help validating and uploading a file. I want to have 2 conditions: if the file type doesn't match, show an alert saying "Invalid file"; second condition, if the file is empty or matches, insert data. However, if th ...

phpjqueryajax

Discover the method to retrieve the month name from an HTML Date input value

Here we have a date input field <input id="customer-date" name="customer-date" type="date" required> Accompanied by this script const customerDate = document.getElementById('customer-date').value; const dateHandler = document.getElementB ...

javascripthtmldate

Style line breaks using CSS

Can CSS(3) be used to visually or textually emphasize line breaks that were automatically added by browsers? For example, displaying a symbol like ↻ at the end of each wrapped line. It is crucial to identify where lines were wrapped in source code, as n ...

htmlcssword-wrap

sending data with JavaScript and AJAX to a PHP file

$(document).ready(function() { $(":input").focusout(function () { var a= $(this).closest("tr").attr('id'); var b= $(this).closest("td").attr('id'); var data = $(this).attr("value"); $.post("database.php", {trAdress: ...

phpjavascriptjqueryajax

Bug in jQuery mouse hover effect causes the mouseover event to fire multiple times upon mouseout

I'm experiencing an issue with my gallery grid where a nested span displaying the title is supposed to slide up on mouseover and hide on mouseout. However, whenever the mouse moves down to the title or hovers out of the tile from the bottom, the hover ...

jqueryhoverjquery-animatemouseovermouseout

How can I target the first checkbox within a table row using jQuery?

I am seeking a way to determine if the first checkbox in a table row is selected, rather than checking all checkboxes within that particular row. Currently, I am using this code: var b = false; $j('#tb1 td input:checkbox').each(function(){ ...

javascriptjqueryhtmlcheckbox

jquery - issue with google analytics not loading in the footer

I have been attempting to integrate Google Analytics into all of my HTML pages. The specific page I am focusing on is rates.html. <html> <head> <title></title> <script src="//code.jquery.com/jquery-1.10.2.js"></scri ...

jqueryhtmlgoogle-analytics

Incorporating images instead of text messages in a jQuery form validator

Is there a way to display a success image instead of text in this code block? success: function(label) { label.addClass('valid').text("ok") }, I prefer not to use a CSS background-image for this solution. ...

jqueryajaxformsvalidation