Forums

Autonav Mobile Menu on Desktop

Permalink
I'm attempting to have the mobile menu (hamburger icon) from the responsive_header_navigation autonav template be visible on desktop. I hoped it was as easy as removing the display none on the mobile menu and adding display none on the normal nav, but I was wrong. Any ideas on how I can make this work? Thanks in advance!
Kurtopsy
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi Kurtopsy,

The Responsive Header Navigation can be made to display on desktop, but ideally should be modified to avoid creating an unnecessary copy of the navigation items. For more control over the hamburger icon position, the hamburger HTML needs to be moved into the theme (so that it can be positioned absolute in relation to the body or header).

This is where the navigation is cloned.
https://github.com/concrete5/concrete5/blob/develop/web/concrete/blo...

- display the hamburger
.ccm-responsive-menu-launch {
    /* display: none; */
    cursor: pointer;
    margin-top: 10px;
    float: right;
}

- display the mobile nav
@media (min-width: 767px)
.ccm-responsive-overlay {
    /* display: none !important; */
}

- this CSS controls the mobile nav color, placement, border, size, etc.
- it is a direct child of the body tag, so it can be easily positioned
.ccm-responsive-overlay {
    background: white;
    display: none;
    position: absolute;
    border-bottom: 5px solid #75ca2a;
    width: 100%;
    z-index: 99;
    top: 120px;
    left: 0px;
    padding-top: 15px;
    padding-left: 20px;
    -webkit-text-size-adjust: none;
}

- optional - replace the slide animation with a show/hide toggle
https://github.com/concrete5/concrete5/blob/develop/web/concrete/blo...
$('.ccm-responsive-menu-launch').click(function(){
    $('.ccm-responsive-menu-launch').toggleClass('responsive-button-close');   // slide out mobile nav
    // $('.ccm-responsive-overlay').slideToggle();
    $('.ccm-responsive-overlay').toggle();
});
Kurtopsy replied on at Permalink Reply
Kurtopsy
Hi MrKDilkington,

Thanks so much!! This is very helpful. I'll give it a shot, and see if I can make it work.