Shopify Question posted in
The Shopify help center can be found here.

Bootstrap Overlay Menu Change Drag Button? – Shopify

Okay, so I made an overlay menu in Bootstrap. Problem is, I’m trying to replace the .ion-drag class with .ion-close when the modal is open, and have it go back to .ion-drag when the modal is closed. How do I do that in jQuery? Every solution on the internet doesn’t work so far.

My website: https://filthdemo.myshopify.com

Tags:

2

Answers


  1. 0

    Try this, keep only .ion-drag before opening modal

    $('.boxed a').toggleClass('ion-drag is-closed')
    Login or Signup to reply.
  2. 0

    add these lines in <head>

    <!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script>
  $('#toggle').click(function() {
  $(this).toggleClass('toggle-active');
  $('#overlay').toggleClass('nav-active');
  });
</script>

    and change your <header> as

    <header>
    <div class="navbar-header">
        <div class="toggle-button" id="toggle">
            <span class="bar top"></span>
            <span class="bar middle"></span>
            <span class="bar bottom"></span>
        </div>
    </div>
    <nav class="overlay" id="overlay">
        <ul>
            <li><a href="#">Our Story</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Information</a></li>
            <li><a href="#">ARTICLES</a></li>
            <li><a href="#">HELP</a></li>
        </ul>
    </nav>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search