Bootsrap 3 drop - down submenu links not working in mobile view - html

Question

I created a drop down sub menu in bootstrap 3, in which the links are working (It goes to respective pages). But, While i shrink the browser to look as if like a mobile view, the links of the sub menus are not working(It goes to different page while the menu is clicked).
The following image depicts the issue with my issue.
From the above image, if i move the curser to click the 'tamil newsletter', it is moving to 'gallery' page.
I feel there is a simple solution for this issue and i do not know where i am wrong.
The following is my code:-
<nav id="navbar-section" class="navbar navbar-default navbar-static-top navbar-sticky" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<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 id="navbar-spy" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li>
About Us
</li>
<li>
Support Us
</li>
<li class="active dropdown">Newsletter
<ul class="nav navbar-nav pull-right dropdown-menu" role="menu">
<li>Tamil Newsletter</li>
<li>English Newsletter</li>
</ul>
</li>
<li>
<span>Gallery</span>
</li>
<li>
<span>Contact Us</span>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav id="navbar-section" class="navbar navbar-default navbar-static-top navbar-sticky" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<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 id="navbar-spy" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li>
About Us
</li>
<li>
Support Us
</li>
<li class="active dropdown">Newsletter
<ul class="nav navbar-nav pull-right dropdown-menu" role="menu">
<li>Tamil Newsletter</li>
<li>English Newsletter</li>
</ul>
</li>
<li>
<span>Gallery</span>
</li>
<li>
<span>Contact Us</span>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

You are using bootstrap nav already... The pull-right which you added to dropdown-menu is creating the problem....
So as a quick patch, add this to you css.. add more specificity if there are other dropdown-menus on the page.
#media(max-width: 768px){
#navbar-spy > .navbar-nav{
border-left: 1px solid #ddd;
margin: 0 -15px;
width: 170px;
}
#navbar-spy .dropdown-menu.pull-right {
float: none !important;
}
#navbar-spy .dropdown-menu.navbar-nav{
margin:0;
font-size: 13px;
padding: 0;
}
#navbar-spy .navbar-nav .open .dropdown-menu.navbar-nav > li > a{
padding:2px 10px 2px 20px;
border-bottom: 1px solid #ddd;
}
}