Bitrix. Вывод 2 разных меню по условию

У меня есть задача, вывести меню, гамбургер, в мобильной версии. Сделать это нужно так,что бы десктоп версии выводился 1 дизайн меню, а в мобильной версии другой.

Пробовал через Mobile Detect в php. Ошибка. Пробовал через isMobile в Bitrix. Ошибка. Пробовал через свойство display в css в медиа-запросах. При скрытии одного меню, пропадает и другое.

Все операции провожу в компоненте. Ниже пример моего кода в компоненте:

<?if (!empty($arResult)):?>
    <ul class="desctop-navigation">
        <?foreach($arResult as $arItem):?>
            <?if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) 
                continue;?>
                <?if($arItem["SELECTED"]):?>
                    <a href="<?=$arItem["LINK"]?>"><li class="btn btn-warning"><?=$arItem["TEXT"]?></li></a>
                <?else:?>
                    <a href="<?=$arItem["LINK"]?>"><li class="btn btn-info"><?=$arItem["TEXT"]?></li></a>
                <?endif?>
        <?endforeach?>  
    </ul>
    <div class="nav-header">
        <input class="nav-burger__checkbox" type="checkbox" id="burger">
        <label class="nav-burger" for="burger">Меню</label>
        <ul class="nav">
            <?foreach($arResult as $arItem):
                if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) 
                    continue;?>
                    <?if($arItem["SELECTED"]):?>
                        <li><a class="nav__item" href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                    <?else:?>
                        <li><a class="nav__item" href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                    <?endif?>
            <?endforeach?>
        </ul>
    </div>
<?endIf?>