Code to create 'Hamburger' menu on template

Hi all, many thanks in advance for any help I am able to receive to my query. 

I have installed 'Five' template. However, I am no longer liking the menu selection at the top of the page, so wish to change it to a more modern, sleeker and easier for clients to navigate 'Hamburger' style menu. 

This template doesn't use that style unless in mobile or tablet mode. Is there some code that any of you know of where I am able to inject it on site so that it always comes up with the 'Hamburger' style menu please?

Also, is there a way when on mobile devices my logo at the top is still viewed as it seems to disapear? 

Thanks again! I hope someone is able to shed some light on the query. 

All the best. 

You can use custom code to force Mobile Header on Desktop, and hide desktop header...

#mobile-navigation {
    display: block;
}
div#navigation-top {
    display: none !important;
}

19 hours ago, tuanphan said:

You can use custom code to force Mobile Header on Desktop, and hide desktop header...

#mobile-navigation {
    display: block;
}
div#navigation-top {
    display: none !important;
}

 

This is fantastic! Thank you very much for sending this code, it has worked exactly how you say. Amazing!

However, is there also a way to assign this to the left of the page? And still be able to have the brand 'LOGO' at the top?

It's a shame that on mobile it misses the brand 'LOGO' out.