Grow your CSS skills. Land your dream job.

Accordion menu goes into footer

  • # December 11, 2012 at 5:41 am

    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;
    }
    }
    );

    });

    # December 11, 2012 at 5:53 am

    O and the page adress:

    # December 11, 2012 at 6:10 am

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

    #secondary {
    margin-bottom: 30px; /* Or whatever value you feel comfortable with */
    }

    # December 11, 2012 at 6:33 am

    got it. The problem was wp-equal-colums, but I’ve also added the bottom margin. Thanks:)

    # December 11, 2012 at 9:02 am

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

    # December 11, 2012 at 9:16 am

    Ahh, it’s all fine now, nevermind.

    # December 11, 2012 at 9:20 am

    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 480×320 and not to interfere with other resolutions.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".