0

I would like to hide menu on mobile only when viewing posts. Menu at the homepage should be visible on mobile but not the other pages. How can I do it?

Here is the menu snippet:

<nav class="navigation cf" <?php echo implode(' ', $nav_data); ?>>

            <div class="mobile" data-type="<?php echo Bunyad::options()->mobile_menu_type; ?>" data-search="<?php echo Bunyad::options()->mobile_nav_search; ?>">
                <a href="#" class="selected">
                    <span class="text"><?php _e('Navigate', 'bunyad'); ?></span><span class="current"></span> <i class="hamburger fa fa-bars"></i>
                </a>
            </div>
            <?php wp_nav_menu(array('theme_location' => 'main', 'fallback_cb' => '', 'walker' =>  'Bunyad_Menu_Walker')); ?>
        </nav>

1 Answer 1

0

Assuming you are editing a child theme (or somehow protecting your changes from future update/over-writing) a very simple way to accomplish this is with a CSS rule that targets your mobile menu, then applies display: none to it.

Using a combination of media queries and carefully written CSS selectors, you can target exactly the HTML elements you wish to hide, and in what context.

My guess is you will need a combination of body class (for the correct content type), media query and appropriate CSS.

5
  • There should be a PHP solution, CSS won't handle it alone if I want to hide it only from posts and not from homepage...
    – jolaviska
    Nov 11, 2014 at 11:55
  • I disagree. Your theme likely has plenty of classes available specific to the areas and elements you wish to hide. There is a PHP solution as well. The simplest route is likely with the conditional tags available in WP.
    – jdm2112
    Nov 11, 2014 at 17:16
  • You are right, I thought about what you said and tried to do it. Ta da! it worked, thanks man!
    – jolaviska
    Nov 11, 2014 at 19:44
  • Glad you were able to make it work. Which solution did you go with? Might be useful for those that come after to post a few details.
    – jdm2112
    Nov 11, 2014 at 19:47
  • 1
    Solution: @media handheld, only screen and (max-width: 799px){ .single-post .navigation {display: none;} }
    – jolaviska
    Nov 11, 2014 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.