Bulma navbar with dropdown css style on responsive mode

I am using Bulma CSS (Ver. 0.9.4) for a responsive top and fixed navigation bar with dropdown and custom background color. Below is the code and the css. I dont know any javascript or jquery. My problem is:
1) The link with dropdown item does not have the same hover effect as the other links. How to have the same hover and text-color effect for the dropdown item?
2) How can I retain the same css style (background and hover) effect when on mobile mode?
3) The script tag has both javascript and jquery code. I had like to have either javascript or jquery code to help me understand the code better for future also.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Index</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
  <link rel="stylesheet" href="index.css" />
  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    body {
      background-color: #7e909a;
    }
    
    .bg-color {
      background-color: #488a99;
    }
    
    .navbar-item {
      color: white;
    }
    
    .box-shadow-y {
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
    }
    
    .brandlogo {
      margin-right: 10px;
    }
  </style>

</head>

<body>
  <nav class="navbar bg-color box-shadow-y" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img src="water_elements.svg" width="40" height="64" /> BrandName
      </a>

      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span class="has-text-white" aria-hidden="true"></span>
        <span class="has-text-white" aria-hidden="true"></span>
        <span class="has-text-white" aria-hidden="true"></span>
      </a>
    </div>
    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item"> Home </a>
        <a class="navbar-item"> Documentation </a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link has-text-white"> More </a>
          <div class="navbar-dropdown bg-color is-hidden-mobile is-boxed">
            <a class="navbar-item"> About </a>
            <a class="navbar-item"> Jobs </a>
            <a class="navbar-item"> Contact </a>
            <hr class="navbar-divider" />
            <a class="navbar-item"> Report an issue </a>
          </div>
        </div>
      </div>
      <div class="navbar-end">
        <a class="navbar-item"> Logout </a>
      </div>
    </div>
  </nav>
  <script>
    $(document).ready(function() {
      $(".navbar-burger").click(function() {
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
      });
    });

    document.querySelectorAll(".navbar-link").forEach(function(navbarLink) {
      navbarLink.addEventListener("click", function() {
        navbarLink.nextElementSibling.classList.toggle("is-hidden-mobile");
      });
    });
  </script>
</body>

</html>

Bulma navbar with dropdown css style on responsive mode

0 Answers