nav-right contents in bootstrap not getting fit in ipads - css

Question

Contents in right side on nav bar is not seen in iPads , but visible in web page.
I tried to add a css for this
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
.navbar-fixed-top,
.navbar-fixed-bottom,navbar-right {
position: fixed;
margin-left: 0px;
margin-right: 0px;
}
}
But this doesn't bring any change
I am new to Bootstrap , Please help me to resolve in a best possible way.
<div id="head-nav" class="navbar navbar-default navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-gear"></span>
</button>
<a class="navbar-brand" href="#"><span><img src="../images/imagesj/logotype.png"
alt="enviroManager" width="144"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="<c:url value="/enviro/home.htm" />" class="dropdown-toggle"
data-toggle="dropdown"><fmt:message key="homeMenu" /> <b class="caret"></b></a>
<ul class="dropdown-menu col-menu-2">
<li class="col-sm-6 no-padding">
<ul>
<li class="dropdown-header"><i class="fa fa-eye"></i><fmt:message key="menu.views" /></li>
<li>Dashboard</li>
<li>Groups</li>
<li>Users</li>
</ul>
</li>
<li class="col-sm-6 no-padding">
<ul>
<li>Modules</li>
<li>User Domains</li>
<li>Licences</li>
<li>Questions</li>
<li>Software Change Log</li>
</ul>
</li>
</ul>
</li>
<ul class="nav navbar-nav navbar-right user-nav" >
<li class="dropdown profile_menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img alt="Avatar" src="../images/imagesj/avatar2.jpg" /><span><c:out value="${uName}"/></span>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>My Account</li>
<li>Profile</li>
<li>Messages</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right user-nav">
<li class="dropdown profile_menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe"></i>
<span> Languages </span> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Current Locale : ${pageContext.response.locale}</li>
<li class="divider"></li>
<li>English</li>
<li><a href="<c:out value="${landingPage}" />?language=span">Spanish
<span class="flag-icon flag-icon-es"></span></a></li>
<li><a href="<c:out value="${landingPage}" />?language=fr">French
<span class="flag-icon flag-icon-fr"></span></a></li>
<li><a href="<c:out value="${landingPage}" />?language=zh_CN"> Chinese
<span class="flag-icon flag-icon-cn"></span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>