Bootstrap: Navbar dropdown not working on iPhone

[herrherrmann]

Hello there,

we recently launched a small site for our project gopass and I was brave enough to try out the new bootstrap alpha (4.0.0-alpha.6).

When accessing the site on an iPhone, the navbar dropdown unfortunately does not work (it works fine in the browser and on Android). I tested both Safari and Chrome.

This is how it's implemented:

<nav class="gopass__navbar navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="container">
        <a class="navbar-brand" href="/gopass/">
            <img src="/gopass/img/gopass_gopher-sm.png" alt="gopass Gopher" class="gopass__navbar__gopher">
            gopass
            <span class="text-muted hidden-xs-down">
                - the team password manager
            </span>
        </a>
    </div>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/gopass/">
                    Home
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/gopass/docs">    
                    Docs
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/gopass/faq">
                    FAQ
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://github.com/justwatchcom/gopass">
                    <i class="fa fa-github"></i>
                    GitHub
                </a>
            </li>
        </ul>
    </div>
</nav>

Am I missing something or is this a bug?

[smutek]

I noticed your site is throwing an error on Safari - Failed to load resource: the server responded with a status of 404 (Not Found) for https://www.justwatch.com/gopass/js/tooltip.js.map

I'm not getting that error on Firefox or Chrome.

[herrherrmann]

Well, the container within the navbar seems to have been the problem. Its big margin was obviously "above" the navbar-toggle which made the latter one non-clickable (at least on iPhone). I fixed it now by moving the toggle into the container and applying some custom styles to properly position it on the right side.

[sifaou2019]

activate this code js

$(document).ready(function(){
$('.dropdown-toggle').dropdown();
});