shantichu87

Forum Replies Created

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • in reply to: Collapse sub-menu items on mobile #163

    shantichu87
    Participant

    You’re very welcome!

    in reply to: Collapse sub-menu items on mobile #160

    shantichu87
    Participant

    I finally implemented functionality for this feature. If you or anyone else wishes to use it, feel free to go off my approach.

    In navigation.js, I added the following lines:

    var $j = jQuery.noConflict();
    
    // Find all menus with children and append font awesome down angle to text
    var $menusWithChildren = $j('.menu-item-has-children');
    $menusWithChildren.children('a').append(' <span class="fa fa-angle-down"></span>');
    
    // Check screen width so this only runs in mobile view
    var screenWidth = $j(window).width();
    if (screenWidth <= 1023) {
    		
      $j($menusWithChildren).click(function() {
        var childMenu = $j(this).children('.sub-menu');
    			
        // Slide child menu down or up smoothly based on visibility of element
        if (childMenu.is(':hidden')){
           childMenu.delay(20).slideDown(200);
           this.setAttribute('aria-expanded', 'true');
        } else {
           childMenu.delay(20).slideUp(200);
           this.setAttribute('aria-expanded', 'false');
        }
      }).click($menusWithChildren, function(e) {
          e.stopPropagation();
      });
    }

    Also, in the else clause of the preexisting button.click function, I added the following line to hide all navbar submenus upon opening the main mobile drop down:
    $j('.menu-primary-container .sub-menu').hide();

    I’m sure it can be optimized, but I thought this was a pretty good solution.

    Cheers

    in reply to: Adding a logo #156

    shantichu87
    Participant

    Cool!

    in reply to: Collapse sub-menu items on mobile #155

    shantichu87
    Participant

    Thanks!

    in reply to: Collapse sub-menu items on mobile #152

    shantichu87
    Participant

    Hi Pasquale, could you tell me which file has the logic for the drop down menu effect for desktop screens? And also which file has the logic for the mobile version of the navbar?

    in reply to: Adding a logo #148

    shantichu87
    Participant

    I didn’t add a logo per se, but I did something similar. I ended up creating a child theme and modifying the header.php source file. In this section <nav id="site-navigation" class="main-navigation" role="navigation">, I added some text for the branding of my site. So the modified nav looks like:

    <nav id="site-navigation" class="main-navigation" role="navigation">
         <div class="site-name">
             <a class="home-link" href="/">ChiVeg</a>
         </div>
         <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu', 'foodypro' ); ?>
         </button>
         <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>

    I’m sure you can do something similar with a logo. Let me know if you need help implementing this.

    My site for reference is https://www.chiveg.com/. What I added was the text “ChiVeg” in the top left of the navbar

    • This reply was modified 3 months, 3 weeks ago by  shantichu87.
    • This reply was modified 3 months, 3 weeks ago by  shantichu87.
    • This reply was modified 3 months, 3 weeks ago by  shantichu87.
    in reply to: Console errors from images #128

    shantichu87
    Participant

    Well, I’ve been getting these errors since I first migrated over, and I’ve noticed it on multiple computers and laptops. You’re not seeing these?

    View post on imgur.com

    • This reply was modified 5 months ago by  shantichu87.
Viewing 7 posts - 1 through 7 (of 7 total)