Below is the code snippet I am using on my website to implement a menu with Bootstrap 3:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default" style="background: rgba(255,255,255,0.5);">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a href="/" class="navbar-left" style="margin-top: 5px;">Title</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" style="margin-top: 5px;" class="dropdown-toggle btn btn-info"><i class="fas fa-spin text-warning fa-bolt"></i>വിഭാഗങ്ങൾ<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
</ul>
</li>
</ul>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-left">
<li><a target="_blank" class="btn btn-primary" href="#">test1</a></li>
<li><a target="_blank" href="#">test1</a></li>
<li><a href="/users/sign_up">Sign up</a></li>
<li><a href="/users/sign_in">Log in</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
To see a demonstration of this code, you can click here. However, there seems to be an issue where the revealed content overlaps with the navbar when clicking on the collapsible three lines. I have tried adjusting padding as well as utilizing the classes pull-left and pull-right, but these solutions have not resolved the problem. Can someone help identify the error in my code?