treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Accordion menu goes into footer

  • Hello. I have a problem. I've made a accordion menu in sidebar using wp_nav_menu. Everything works great as long as the content has a lot of info. But when there is no text or is a little, after clicking "Szkoła" (second from top) the menu is going in to the footer. I would like the footer to go down when the menu is opening. Can you help me? the jquery script for menu:

    $(document).ready( function($) {
    
        // This hides all the sub menus on page load
        $('#mb-nav ul.sub-menu').hide();
        // This makes sure that all the sub menus are open when applicable
        $('#mb-nav li.current-menu-item').children().show();
        // This keeps the nav open to the item that you are navigating to.
        $('#mb-nav li.current-menu-item').parents().show();
    
        $('#mb-nav ul li a').click(
        function() {
        var checkElement = $(this).next();
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $(this).parent().siblings("li:has(ul)").find("ul").slideUp('normal');
        $('#mb-nav ul ul li ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
        }
        );
        $('#mb-nav ul ul li a').click(
        function() {
        var checkElement = $(this).next();
        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#mb-nav ul ul').slideUp('normal');
        $('#mb-nav ul ul li ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
        }
        );  
    
        });
    
  • O and the page adress:

  • Add some bottom margin to your secondary div. Like so;

    #secondary {
      margin-bottom: 30px; /* Or whatever value you feel comfortable with */
    }
    
  • got it. The problem was wp-equal-colums, but I've also added the bottom margin. Thanks:)

  • Really? Your whole website seems to have lost its layout?

  • Ahh, it's all fine now, nevermind.

  • I'm working on @media screen, and I had a @media screen and (min-width:480px), and that has changed the layout. I'm having a little problem with getting the media screen to work in 480x320 and not to interfere with other resolutions.