Having an issue with my site on mobile devices while using Twitter Bootstrap.
The header is not displaying correctly when I resize the window, it appears like this:
It should look consistent across all devices as shown below:
Below is my HTML code:
<ul class="nav pull-right">
<li><a href="index.html"><b>Home</b></a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-togle" data-toggle="dropdown">
<b>Download</b>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="downloading_link.html">Meepo for iPhone</a></li>
<li><a href="#" id="not_active">Android coming soon</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="faq.html"><b>F.A.Q.</b></a></li>
<li class="divider-vertical"></li>
<li><a href="support/index.html" id="last_link"><b>Support</b></a>
</li>
</ul>
and these are the CSS styles used:
.navbar .nav.pull-right {
margin-left: 10px;
margin-top:40px;
margin-right: 0;
background-image: url('../img/menuBG.png');
background-repeat: no-repeat;
height:57px;
}
I believe removing the background image can improve its mobile usability.
Is there a way to enhance the display on mobile phones without affecting the desktop version? Should I avoid using responsive CSS for resizing?