3

I programmed a website for web- and mobiledevices and uploadet it to a domain. Some how the navbar dont want to collapse on my smartphone, if I resize the browser to the same size it works perfect (look at the screenshots).

Mobile Screenshot of the page Mobile Screenshot of the page

PC Screenshot of the page PC Screenshot of the page

My code snipped for the navbar:

    <nav class="navbar navbar-default  navbar-fixed-top"  role="navigation">
        <div class="container-fluid">

            <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" 
                            data-toggle="collapse" data-target="#myNavbar-1" 
                            aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>

                <a class="navbar-brand" href="/">PageName</a>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar-1">

                <ul class="nav navbar-nav hidden-sm hidden-xs">


...(some tabs)
                </ul>

                <ul class="nav navbar-nav pull-right hidden-sm hidden-xs">
...(some tabs)
                </ul>

                <ul class="nav navbar-nav visible-sm visible-xs">


...(some tabs)
                </ul>

            </div>

        </div>
    </nav>

Edit Solution: I forgot to add the

<meta name="viewport" content="width=device-width, initial-scale=1">

tag. Now it works fine.

Dexkill
  • 284
  • 1
  • 2
  • 20
  • 2
    Do you have a viewport meta tag defined in the head, eg. ``? (If not, might be worth [reading about](https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag).) – Serlite Jul 29 '15 at 17:09
  • @Serlite that was the solution, I knew I forgot about something.. thx! – Dexkill Jul 29 '15 at 17:12
  • possible duplicate of [Responsive web design is working on desktop but not on mobile device](http://stackoverflow.com/questions/14304494/responsive-web-design-is-working-on-desktop-but-not-on-mobile-device) – Serlite Jul 29 '15 at 17:14

1 Answers1

1

In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.

To ensure proper rendering and touch zooming, add the viewport meta tag to your head part:

<meta name="viewport" content="width=device-width, initial-scale=1">

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">