CODEWITHSUNDEEP
htmliphonetwitter-bootstrapmodal-dialognavbar
SnazzyJava
SnazzyJava

Reputation: 87

Bootstrap modals not appearing on mobile when called from navbar-right

I've been banging my head over this one for days.

I have a small web application built off of Bootstrap 3. Within the navbar-right div, I have "Log In" and "Sign Up" buttons. On desktops and tablets, when a user taps/clicks on one of these buttons, the appropriate modal dialogue appears.

However, on mobile phones, when the user interacts with the buttons, nothing appears to be happening. My source follows.

(Snippet from navbar div)

    <ul class="nav navbar-nav navbar-right">
        <li><a data-toggle="modal" data-target="#signup-modal">
          <span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a data-toggle="modal" data-target="#login-modal">
          <span class="glyphicon glyphicon-log-in"></span> Log In</a></li>
    </ul>

(Snippet from first few lines of the signup modal)

    <div id="signup-modal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">

Upvotes: 0

Views: 212

Answers (1)

Sam Cosgrove
Sam Cosgrove

Reputation: 26

I have no idea why it won't open the modal unfortunately, had the same issue myself and tried researching it.

My modal works fine on desktop all the time, but I find that when you link to it like this:

<a href="#myModal" data-toggle="modal">Modal</a>

It opens after 3 clicks on mobile (only when not in the navbar-right). Sometimes it opened after 1, but feels buggy.

However, when trying it like this:

<button class="btn btn-xl btn-navbar" data-toggle="modal" data-target="#myModal">Modal</button>

It will work everytime. Instantly, and with no delay. It fires everytime when using a button.

What I did for this particular occasion, was use a button, and a custom class, and style it appropriately, as I didn't want it to look like a button in the navbar, I wanted it to function like any other link.

Works like a charm, give it a go.

Upvotes: 1

Related Questions