Open Mobile menu drawer with custom button click

Question

I added a sticky bottom menu which will be visible only on mobile devices.

Here is the complete code of the widget :

    <head>
          
        <style>
            /* Add some styling for the sticky section */
          .sticky-section {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #f8f8f8;
            padding: 10px;
            text-align: center;
            z-index: 99;
            display: flex;
            height: 70px;
            justify-content: space-around;
        box-shadow: 0 0 10px rgba(0,0,0,.11);
              }
          
          .sticky-section-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #f8f8f8;
            padding: 10px;
            text-align: center;
            z-index: 999;
            display: flex;
            height: 70px;
            justify-content: space-around;
        box-shadow: 0 0 10px rgba(0,0,0,.11);
              }
        
            /* Hide the sticky section on desktop screens */
            @media only screen and (min-width: 768px) {
            .sticky-section {
            display: none;
            }
            }
            /* styling for the links */
            .sticky-section-bar-nav-grid a {
            color: #000;
            text-decoration: none;
            margin: 10px;
            font-size: 1.3rem;
            display: flex;
            flex-direction: column;
            align-content: center;
            align-items: center;
            }
            /* add font awesome icons */
          .sticky-section .fa {
            font-size: 1.6rem;
            }

        .sticky-section-bar-nav-grid{
            align-items: center;
            border-right: 1px solid #eee;
            display: flex;
            flex: 1 0 auto;
            justify-content: center;
            padding: 0px 20px;
            position: relative;
        }
            
        </style>
    </head>
    <body>

      <div class="sticky-section">
                    <ul class="sticky-section-nav" style="background-color: #fff; border-color: #000">
                       <li class="sticky-section-bar-nav-grid">
                          <a class="sticky-section-icon-1" href="/home">
                            <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/home_1.png?v=1684754596" style="width: 20px;  ">
                                <span class="sticky-section-menu-title" style="display: block;color: #000;">Home</span>
                          </a>
                       </li>
                        <li class="sticky-section-bar-nav-grid">
                            <a class="sticky-section-icon-2" href="/collections/all">
                              <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/category.png?v=1684754597" style="width: 20px;  ">
                                 <span class="sticky-section-menu-title" style="display: block;color: #000;">Categories</span>
                            </a>
                        </li>
                        <li class="sticky-section-bar-nav-grid">
                             <a class="sticky-section-icon-3" href="/cart">
                               <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/shopping-cart.png?v=1684754596" style="width: 20px;  ">
                                  <span class="sticky-section-menu-title" style="display: block;color: #000;">Cart</span>
                             </a>
                        </li>
                        <li class="sticky-section-bar-nav-grid">
                               <a class="sticky-section-icon-4" href="/cart">
                                 <img src="https://cdn.shopify.com/s/files/1/0732/1701/6089/files/user.png?v=1684754597" style="width: 20px;  ">
                                    <span class="sticky-section-menu-title" style="display: block;color: #000;">Cart</span>
                               </a>
                        </li>
                    </ul>
      </div>
        
    </body>

I wanted to open the default mobile menu drawer(which opens when we click on the hamnburger icon), when clicked on the category icon.

Can anyone help? I'll really appreciate.

One dev added this script and it worked on one of my website, but its not working on the other website(Same theme, same code, same drawer classes)

<script>
  setTimeout(function () {
       $(document).on("click", ".ad-menu-icon-1", function (e) {
          e.preventDefault()
          $('.menu-drawer-container .header__icon--menu').click();
      });
   }, 1500);
</script>

Add the JS you tried in your question, even if it didn't work. — LoicTheAztec, Aug 24 '23 at 21:44
What is the identifier (selector `class` or `id`) for your hamburger item (to be clicked by javascript)? — LoicTheAztec, Aug 26 '23 at 11:02
I checked from event listner in browser it show "header__icon header__icon--menu header__icon--summary link focus-inset" this class under click event. — chirag, Aug 26 '23 at 17:31
And there is not another **explicit** `class` or `id` in the parent tag? Maybe you could add in your question the HTML output for it (with the parent tag)... Did you tried my answer code? — LoicTheAztec, Aug 26 '23 at 17:34
Yeah I tried but it didn't work. I tried it on my wordpress websitem I also tried only the script in my shopify website. But It wasn't working. — chirag, Aug 26 '23 at 17:43
@LoicTheAztec Actually I want to thank you for always being there to help. I really appreciate your support. — chirag, Aug 26 '23 at 17:48

LoicTheAztec · Accepted Answer · 2023-08-26T18:11:54.590

2

Try the following jQuery code snippet, replacing #hamburger with the correct selector class or id for your "hamburger item" to be triggered to open the menu drawer:

add_action('wp_footer', 'wp_footer_script_test_js', 10);
function wp_footer_script_test_js() {
    ?>
    <script>
    jQuery(function($){
        $('body').on("click", ".sticky-section-icon-2", function(e) {
            e.preventDefault();
            console.log("click"); // Just for testing (after remove it)

            $('button#mobile-toggle').click();
        });
    });
    </script>
    <?php
}

It should work.

edited Aug 26 '23 at 18:11

answered Aug 26 '23 at 11:16

LoicTheAztec

229,944
23
356
399

I notice you added console.log, and I checked browser console, should I get any value? Actually I am getting 3 click – chirag Aug 26 '23 at 17:44
Sure, https://woo.cdesksolutions.com/ – chirag Aug 26 '23 at 18:02
Its working, you are a life saver. – chirag Aug 26 '23 at 18:30
Can you please, why its not working here? I know Its complete different website, i changed the classes accordingly but still not working. – chirag Aug 26 '23 at 18:38
https://cdesk.myshopify.com/ – chirag Aug 26 '23 at 18:45
1

It's not working as the site doesn't use jQuery (jQuery library is not loaded), so you need to use pure Javascript code. – LoicTheAztec Aug 26 '23 at 18:48
This was added : – chirag Aug 26 '23 at 18:50
1

Its working. Thank you Very Much@LoicTheAztec – chirag Aug 26 '23 at 18:58

Open Mobile menu drawer with custom button click

1 Answers1