0

lovely people.

I'm quite the novice in coding, so I've looked at all the forums but can't seem to get a menu to appear upon click on my FA icon. Perhaps I don't understand some things.

My mobile menu I want to look like this:

https://i.stack.imgur.com/Z8bAC.jpg

I have my primary nav and mobile primary nav on top of each other

<nav class="nav nav__primary clearfix">
<ul id="topnav" class="sf-menu sf-js-enabled">
    <li><a href="https://staging1.herbalnitro.com">Home</a></li>
    <li><a href="https://staging1.herbalnitro.com/shop">Shop</a></li>
    <li><a class="sf-with-ul" href="https://staging1.herbalnitro.com/shop">
        <span class="sf-sub-indicator"></span>
    Products</a>
        <ul class="sub-menu">
            <li><a href="https://staging1.herbalnitro.com/product/allura-trim-appetite-control-weight-loss">Allura Trim Fitness Stick</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/colon-cleanse-detox-cleanse-duo/">Colon Cleanse Detox Duo</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/detox-maximo-colon-cleanse/">Detox Maximo Colon Cleanse</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/extreme-energy/">Extreme Energy</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/fuel-for-the-body-natural-energy-booster/">Fuel for the Body</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/my-gentle-cleanse-colon-health/">My Gentle Cleanse 30</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/my-gentle-detox-colon-care/">My Gentle Detox 30</a></li>
        </ul>
    </li>
    <li><a href="https://staging1.herbalnitro.com/herbal-nitro-life-blog">Blog</a></li>
    <li><a href="https://staging1.herbalnitro.com/contact-us">Contact</a></li>
</ul>
<ul id="mobile-nav" class="sf-menu sf-js-enabled">
    <li><a href="https://staging1.herbalnitro.com">Home</a></li>
    <li><a href="https://staging1.herbalnitro.com/shop">Shop</a></li>
    <li><a href="https://staging1.herbalnitro.com/shop">Products</a></li>
    <li><a href="https://staging1.herbalnitro.com/herbal-nitro-life-blog">Blog</a></li>
    <li><a href="https://staging1.herbalnitro.com/contact-us">Contact</a></li>
</ul>

I want to link the #mobile-nav to the hamburger icon in the image, which I have as here:

<a href="#mobile-nav" class="fa fa-bars" aria-hidden="true"></a>
        <a href="https://herbalnitro.com"><img src="https://staging1.herbalnitro.com/wp-content/uploads/2017/09/Logo-165x40.png" /></a>
        <a href="#" class="fa fa-shopping-cart" aria-hidden="true"></a>
        <a href="https://staging1.herbalnitro.com/my-account" class="fa fa-user" aria-hidden="true"></a>
        <a href="#" class="fa fa-search" aria-hidden="true"></a>

You don't have to solve the issue, but some help would be awesome.

Thank you so much! Js

Edit: Child theme custom script

(function($) {
$(function(){
    //Dropdown cart in header
    $('.cart-holder > h3').click(function(){
        if($(this).hasClass('cart-opened')) {
            $(this).removeClass('cart-opened').next().slideUp(300);
        } else {
            $(this).addClass('cart-opened').next().slideDown(300);
        }
    });
    //Popup rating content
    $('.star-rating').each(function(){
        rate_cont = $(this).attr('title');
        $(this).append('<b class="rate_content">' + rate_cont + '</b>');
    });

});

})(jQuery);

Omar
  • 32,302
  • 9
  • 69
  • 112
Poocey
  • 79
  • 1
  • 6
  • I think it would be best if you take a look at some online example's if you want to reach the solution yourself https://codepen.io/g13nn/pen/eHGEF uses jquery and https://codepen.io/erikterwan/pen/EVzeRP uses css only. Its a bit difficult for us to help you if you dont post any css/js that you've been working with. – Wouter Vandevelde Sep 15 '17 at 13:06
  • I understand. Thanks for the reference, Wouter! I've seen both of those, but I'm definitely going to try to dig deeper into the first one. Would I just paste the modified jquery into my child theme's custom script? See edit above. – Poocey Sep 15 '17 at 13:22

2 Answers2

0

It's up to you where to place the code, In small projects you could just write it like this but in bigger projects you can split functionality in multiple filles and use tools like grunt to combine them. I've made the following example based on your code and the JQuery example (no css).

(function($) {
  $(function(){
      //Dropdown cart in header
      $('.cart-holder > h3').click(function(){
          if($(this).hasClass('cart-opened')) {
              $(this).removeClass('cart-opened').next().slideUp(300);
          } else {
              $(this).addClass('cart-opened').next().slideDown(300);
          }
      });
      //Popup rating content
      $('.star-rating').each(function(){
          rate_cont = $(this).attr('title');
          $(this).append('<b class="rate_content">' + rate_cont + '</b>');
      });

  });

  $( ".cross" ).hide();
  $( ".hamburger" ).click(function() {
    $( ".sf-menu" ).slideToggle( "slow", function() {
      $( ".hamburger" ).hide();
      $( ".cross" ).show();
    });
  });

  $( ".cross" ).click(function() {
    $( ".sf-menu" ).slideToggle( "slow", function() {
      $( ".cross" ).hide();
      $( ".hamburger" ).show();
    });
  });

})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav nav__primary clearfix">
<button class="hamburger">&#9776;</button>
<button class="cross">&#735;</button>
<ul id="mobile-nav" class="sf-menu sf-js-enabled">
    <li><a href="#">Home</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</nav>
Wouter Vandevelde
  • 894
  • 9
  • 16
0

Thanks, Wouter.

I changed the nav to:

<a href="#mobile-nav" class="fa fa-bars hamburger" aria-hidden="true"></a>
            <a class="fa fa-times cross" aria-hidden="true"></a>
            <ul id="mobile-nav" class="sf-menu sf-js-enabled">
                <li><a href="#">Home</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

So I could remove the button and use the cross fa-class. Also removed the nav class that had other attributes. Now I just need to edit the #mobile-nav by making the position absolute and stuff. YOu are the bomb.

Poocey
  • 79
  • 1
  • 6
  • Glad to hear :) Note that some browsers use the nav element to know the content is for navigation purposes. So while not at all required it might be good practice to keep it and style it in a way so it doesn't affect the other elements. Anyway, good luck! – Wouter Vandevelde Sep 15 '17 at 15:56
  • Oo, right. Well I added a nav around it again and gave it an id to make ti display inline-block as it needed. Do you know why it might not function on an actual phone? Under 767px it works great, but not on a phone. The click doesn't function. – Poocey Sep 15 '17 at 16:50
  • It seems to work on my phone. I did however find other other people with this problem so maybe this will help you: https://stackoverflow.com/a/18243981/7797002 – Wouter Vandevelde Sep 15 '17 at 17:39