Add sidebar navigation mobile only

AAABARTON1
Tourist
23 0 2

I'm using Streamline theme, and I want to keep the desktop menus but on mobile i want the navigation menu as a sidebar instead of the stocky button at the bottom.

Here is my store: luire.co.uk.

Thanks, really appreciate any help and suggestions.

Replies 6 (6)

Solutions1
Trailblazer
152 12 24

Hello AAAbarton!

I can help you out Deme. Open your "header.liquid" file. First copy all of that code and put it into a file and save it so that you have it in case anything screws up. Then put this at the top of your page:

<style>
#MobileNav {
display: block;
position: absolute;
width: 100%;
background-color: white;
z-index: 99;
left: -100%;
transition:left .2s ease-in-out;
}
<style>
Then Ctrl + F and search for "icon-hamburger". You should see this:

<button type="button" class="mobile-nav-trigger" id="MobileNavTrigger" aria-controls="MobileNav" aria-expanded="false">
<span class="icon icon-hamburger" aria-hidden="true"></span>
{{ 'layout.navigation.menu' | t }}
</button>
In the button tag delete everything but the type and the class name so it should read

<button type="button" class="mobile-nav-trigger">
<span class="icon icon-hamburger" aria-hidden="true"></span>
{{ 'layout.navigation.menu' | t }}
</button>
Then add this to the bottom of your file after {% endschema %}:

<script>
var menu_length = $('#MobileNav').width();
$('.mobile-nav-trigger').on('click',function(){
if($('#MobileNav').css('left')==="-"+menu_length+"px"){
$('#MobileNav').css('left','0');
}else{
$('#MobileNav').css('left','-'+menu_length+"px");
}
});

</script>
Should give you a sliding in navigation.

 

Kindly let us know if you can do this coding sometimes its require more Customized Coding

Hope this helps!

Thanks

Solution1

AAABARTON1
Tourist
23 0 2

Thanks @Solutions1 for your help! really appreciate it. However, I've followed your instructions and tried various changes and still unable to see the sliding menu feature on mobile. All I can see changes is the original bottom menu has disappeared and instead displays text 'Translation missing: en.layout.navigation.menu'

Hope you can guide me further. Thanks again.

Andrew

Solutions1
Trailblazer
152 12 24

Hello AAABARTON!

Yes I can sort it out you can reach me for more discussion 

Thanks

Solution1

AAABARTON1
Tourist
23 0 2
Sure. how can i reach you?
KristerB
Visitor
2 0 0

Hey! Did you figure out how to do this? 

AAABARTON1
Tourist
23 0 2

still struggling with this issue - I got used to the orginal and actually preferred it but now i am looking to change as i am expanding the website please help me.