Calling topMenu for mobiles/tablets in 1.9 when moved from header block

Question

I'm inserted the main navigation into the sidebar on a Magento 1.9 theme in catalog.xml using:-

<block type="catalog/navigation" name="catalog.topnav" before="cart_sidebar" template="catalog/navigation/top.phtml"/>

I've then commented out topMenu in the header block in page.xml as to not show in the header like so:-

    <!--<block type="core/text_list" name="top.menu" as="topMenu" translate="label">
        <label>Navigation Bar</label>
        <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml">
        <block type="page/html_topmenu_renderer" name="catalog.topnav.renderer" template="page/html/topmenu/renderer.phtml"/>
        </block>
    </block>-->

But on mobile/tablet devices in 1.9, the menu dropdown calls topMenu in header.phtml like so:-

    <!-- Navigation -->

    <div id="header-nav" class="skip-content">
        <?php echo $this->getChildHtml('topMenu') ?>
    </div>

Because topMenu does not exist in the header block any longer, the menu does not show.

1. Is it possible to call from the header.phtml instead the navigation I am using in the sidebar via the above code in catalog.xml.

2. Is it possible to still call topMenu if it doesn't exist in the header block or is there a workaround that would allow me to do so? Or am I restricted to just uncommenting page.xml topMenu in the header block and just display: none in CSS on screens from 771px wide?

Answer 1

I would call topMenu by default and hide it for desktop and show it in smaller screen via CSS. As below:

.header-nav{display:none !important;}

@screen-size{max: 980px}{
    .header-nav{display:block !important;}
}

This would do a trick.