Bootstrap Navbar is not responsive only on Android device

Question

I am strucked into an issue where the collapsable bootstrap navbar extends full width and seems not to be responsive only on android mobile devices. It works fine on iphone. The site is http://tworingsmedia.com/clients/Cornwall/05/index.html

Here is the code:

<header id="header" role="banner">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="navbar-brand">
           <a href="index.html"><img src="img/web-logo03.png" width="270" height="248" alt="Cornwall waterfestival logo" class="logo" id="cornwall-logo"></a>
      </div>
    </div>
    <div class="navbar-collapse collapse">
      <div class="menu">
        <ul class="nav nav-tabs" role="tablist">
         <li>.....</li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Don't tag the question with `bootstrap-4` if you aren't actually using Bootstrap 4. — WebDevBooster, Mar 03 '18 at 17:00

score 0 · Answer 1 · answered Mar 04 '18 at 06:32

Try using the image size with rem units. Because the image is not responsive, the nav bar is not getting responsive. With rem units, it will be responsive and you can define the size of it as you wish with the responsiveness.

Should I use px or rem value units in my CSS?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<header id="header" role="banner">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="navbar-brand">
          <a href="index.html"><img src="http://tworingsmedia.com/clients/Cornwall/05/img/web-logo03.png" width="100rem" height="90rem" alt="Cornwall waterfestival logo" class="logo" id="cornwall-logo"></a>
        </div>
      </div>
      <div class="navbar-collapse collapse">
        <div class="menu">
          <ul class="nav nav-tabs" role="tablist">
            <li>.....</li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

Bootstrap Navbar is not responsive only on Android device

1 Answers1