Nav bar not collapsing after URL rewrite htaccess

Question

I have rewritten my url from https://example.com/post.php?post_id=1&post_url=best-articles-in-the-internet to https://example.com/post/1/best-articles-in-the-internet and also removed extensions with htaccess. Wherever I have rewritten the url, the nav bar menu is not dropping/collapsing down in small screen devices/ mobiles. But in all the original unchanged URLs, the nav menu works perfectly in mobiles. Why is this happening to me? Without htaccess rewrite, it works without any issue but with rewrite, menu doesnt work in phone. Thank you in advance! I'm including my bootstrap menu code here.

Nav Code in Header of all files,

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="https://example.com/index/"><img src="https://example.com/img/site/Logo.png" alt="mysite Logo"  width="180px" height="54px" > </a>
      </div>
  
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://example.com/index/"><i class="fa fa-home"></i> Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-list-alt"></i> Categories<span class="caret"></span></a>
            <ul class="dropdown-menu">
            <?php
              $query = "SELECT * FROM categories ORDER BY cate_id DESC";
              $run =  mysqli_query($con, $query);
              if(mysqli_num_rows($run) > 0){
                while($row = mysqli_fetch_array($run)){
                  $category = ucwords($row['category']);
                  $php_name = $row['php_name'];
                  echo "<li><a href='https://example.com/$php_name/'>$category</a></li>";
                }
              }
              else{
                echo "<li><a href='#'>No Categories Available</a></li>";
              }
            ?>
            </ul>
          </li>
          <li><a href="https://example.com/contact-us/"><i class="fa fa-phone"></i> Contact Us</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

Code in style.css

@media only screen and (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }

Code in Main.js

$('.dropdown-toggle').click(function(e) {
if ($(document).width() > 768) {
  e.preventDefault();

  var url = $(this).attr('href');

     
  if (url !== '#') {
  
    window.location.href = url;
  }

}
});

AOS.init();

htaccess Rewrite Rules

# Turn Rewrite Engine On
RewriteEngine on
# Rewrite for post.php?post_id=1&post_url=Title-Goes-Here
RewriteRule ^post/([0-9]+)/([0-9a-zA-Z_-]+)$ post.php?post_id=$1&post_url=$2 [NC,L]
# Rewrite for index.php?page=1
RewriteRule ^index/page/([0-9]+)$ index.php?page=$1 [NC,L]
# Rewrite for category.php?page=1
RewriteRule ^category/page/([0-9]+)$ category.php?page=$1 [NC,L]
# Rewrite for file extension
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.php
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

Answer 1

Try emptying caches, that usually works. This is often done in the develop(er) menu of your browser.