Resumidamente, queria esse código quando a largura da página fosse maior que 700px:
<?php if($this->API->get('show_menu', 1)) : ?><div id="MainMenu" <?php echo $this->API->get('menu_type', 'Ny') == 'Nx' ? 'class="Page MenuNx"' : 'class="Page MenuNy"'; ?>><?php$this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));$this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));?></div><?php endif; ?>
Mas, quando fosse menor que 700px, queria esse:
<aside id="header-mobile-menu-widget" class="widget_mobile-menu"><span id="header-mobile-menu" href="#"></span><div class="header-mobile-menu-wrap displaynone"><?php if($this->API->get('show_menu', 1)) : ?><div id="MainMenu" <?php echo $this->API->get('menu_type', 'Ny') == 'Nx' ? 'class="Page MenuNx"' : 'class="Page MenuNy"'; ?>><?php$this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));$this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));?></div><?php endif; ?></div></aside>
Não adianta usar media queries porque o elemento some completamente com display: none; Queria fazer uma substituição do código de acordo com a largura da página. Se alguém puder me ajudar eu agradeço. Estou começando agora e não sei nada de jquery, javascript...