<p dir="auto">I have the following navbar on my website:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;navbar navbar-inverse&quot;&gt;
    &lt;div class=&quot;navbar-inner&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-navbar&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.nav-collapse&quot;&gt;
            &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class=&quot;nav-collapse collapse&quot;&gt;
        &lt;ul class=&quot;nav&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;index.php&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;one2one.php&quot;&gt;One to One&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;dropdown&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; id=&quot;dLabel&quot;&gt;Classes &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;
                &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dLabel&quot;&gt;
                    &lt;li&gt;&lt;a href=&quot;classes.php&quot;&gt;Classes&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;online-yoga-classes.php&quot;&gt;Online Yoga Classes&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;free-downloads.php&quot;&gt;Free Downloads&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;gallery.php&quot;&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;retreats-workshops.php&quot;&gt;Retreats &amp;amp; Workshops&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;pregnancy-mums.php&quot;&gt;Pregnancy Mums&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;treatments.php&quot;&gt;Treatments&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;about-me.php&quot;&gt;About Me&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;testimonials.php&quot;&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;about-yoga.php&quot;&gt;About Yoga&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="navbar navbar-inverse"&gt;
    &lt;div class="navbar-inner"&gt;
        &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="nav-collapse collapse"&gt;
        &lt;ul class="nav"&gt;
            &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="one2one.php"&gt;One to One&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" id="dLabel"&gt;Classes &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
                    &lt;li&gt;&lt;a href="classes.php"&gt;Classes&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="online-yoga-classes.php"&gt;Online Yoga Classes&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="free-downloads.php"&gt;Free Downloads&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="gallery.php"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="retreats-workshops.php"&gt;Retreats &amp;amp; Workshops&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="pregnancy-mums.php"&gt;Pregnancy Mums&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="treatments.php"&gt;Treatments&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="about-me.php"&gt;About Me&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="testimonials.php"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="about-yoga.php"&gt;About Yoga&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">The issue I am having is that when the navbar is collapsed on mobile devices (it works correctly when collapsed using a desktop computer), the links within my dropdown do not navigate to the new page, selecting a link within the dropdown just closes the dropdown as though the click is being registered on the dropdown parent li, not the link itself.</p>
<p dir="auto">As I say when the navbar is expanded, or is collapsed on a device which uses a mouse the link navigates to the new page correctly, it seems to be when I press a link using a touch device that I have issues, you can view the problem live on <a href="http://yogarelax.harpoonmysite.com" rel="nofollow">http://yogarelax.harpoonmysite.com</a></p>
<p dir="auto">Any assistance with this would be much appreciated, thank you</p>
<p dir="auto">I had a project using more or less the same menu and it worked. Found out it was using Bootstrap version 2.3.1. Compared version 2.3.2 and 2.3.1 and found that in version 2.3.2 there's this snippet of CSS that reads:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}"><pre class="notranslate"><code class="notranslate">.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}
</code></pre></div>
<p dir="auto">and the rule: <code class="notranslate">position: fixed;</code> seems to cause all the problems.</p>
<p dir="auto">I still don't undertand the point of the markup that is added by the bootstrap dropdown plugin:</p>
<p dir="auto"><code class="notranslate">&lt;div class="dropdown-backdrop"&gt;&lt;/div&gt;</code></p>
<p dir="auto">So I've temporarily fixed the bug on my end by adding a style to override the style causing the problem:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".dropdown-backdrop {
    position: static;
}"><pre class="notranslate"><code class="notranslate">.dropdown-backdrop {
    position: static;
}
</code></pre></div>
<p dir="auto">To me this looks like  a bug introduced from version 2.3.1 to 2.3.2. Maybe I'm wrong. If someone could explain the purpose of the empty div, it would be helpful.</p>