Twitter Bootstrap on SharePoint: Navbar not collapsing into button on mobile browsers

Question

Long time lurker, 1st time poster.

I'm having an issue with the navbar when viewing my SharePoint site on mobile. To be clear, the responsiveness of the site works perfectly when viewed on a desktop. When I shrink up the window, the navbar transitions from a horizontal nav, to a collapsed button navbar that displays the navigation options once clicked. However, it's not doing this for mobile.

I'm using the default Bootstrap.css file so all the @media tags you see on the default, is what I have as well in my file. As far as the coding on my masterpage goes, this is what I have for my navbar:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <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="../Pages/Home.aspx">Home</a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">     
                <PublishingNavigation:PortalSiteMapDataSource ID="topSiteMap" runat="server" EnableViewState="false" SiteMapProvider="CombinedNavSiteMapProvider" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/>
                <SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="true" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" SkipLinkText=""/>
            </div>
        </div>
    </nav>

It does not matter what browser I test on (Safari, Chrome, Opera Mini), all mobile browsers give the same result, no collapsed navbar.

Any help on this issue would be greatly appreciated.

Answer 1

Try adding a meta tag reference in the header section of your masterpage:

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

The content="width=device-width" defines the width of the screen in CSS pixels at a scale of 100% and the "initial-scale" determines zoom.

Here's a little background on viewports: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

You can see the same meta tag in the header section of the Twitter Bootstrap for SharePoint masterpage. Around line 65.