I have been tasked with making modifications to a website that was created using Bootstrap v3.3.7. The site includes a navbar (HTML provided below) that appears fine. However, I needed to add a dropdown item to the navbar, which I did by following the guidelines on the Bootstrap page. The HTML code is essentially the same as what I have used successfully in other instances.
Yet, when I click on the dropdown option in this specific case, the menu gets cut off...
https://i.sstatic.net/t3xFL.png
You can only see the top part of the first item in the menu, and nothing more.
Could someone please explain why this issue is occurring? Here is the HTML for the navbar:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="site-title">
<h3>My web site</h3>
</div>
</div>
<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>
</div>
<div class="col-md-8 col-sm-8 navbar-style">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="...">Link 1</a></li>
<li><a href="...">Link 2</a></li>
<li><a href="...">Link 3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Colours <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">abc</a></li>
<li><a href="#">def</a></li>
<li><a href="#">ghi</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>