Grow your CSS skills. Land your dream job.

WordPress is_page failing in responsive design

  • # April 30, 2013 at 9:24 am

    I am running into a very odd bug here:
    http://dppad.com/dev/3/about/

    I am trying to add a ‘current’ state to the nav item reflecting the current page. It’s successful on the full and tablet versions of the menu (contained in header.php), but the mobile version (in footer.php) is only giving me luck on one of the pages.

    Any thoughts are greatly appreciated.

    footer.php:
    http://pastebin.com/2ZjP9BCU

    header.php:

    http://pastebin.com/tPUNNU1r

    # April 30, 2013 at 2:28 pm

    There’s likely some sort of loop problem occurring. Try resetting your query before your footer nav.

    # May 8, 2013 at 10:51 am

    Copy that. I worked out a fairly simple solution via jQuery utilizing WordPress’s native namespacing:

    function mobileCurrentPage() {
    var page = $(‘body’);

    if ( page.hasClass(‘page-id-54′) ) {
    $(‘.about_link a’).addClass(‘current’);
    $(‘.bios_link a’).removeClass(‘current’);
    }

    else if ( page.hasClass(‘page-id-42′) || page.hasClass(‘single-case_study’) ) {
    $(‘.results_link a’).addClass(‘current’);
    }

    else if ( page.hasClass(‘page-id-80′) || page.hasClass(‘single-post’) ) {
    $(‘.blog_link a’).addClass(‘current’);
    }

    else if ( page.hasClass(‘page-id-485′) ) {
    $(‘.connect_link a’).addClass(‘current’);
    }

    else {
    }
    }

    It felt a little like giving up, but a solution’s a solution in my book.

    Thanks for the reply.

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

You must be logged in to reply to this topic.

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