How can I add a mobile-only sidebar navigation on Streamline theme?

Store Design
1

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.

2

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:

#MobileNav { display: block; position: absolute; width: 100%; background-color: white; z-index: 99; left: -100%; transition:left .2s ease-in-out; } Then Ctrl + F and search for "icon-hamburger". You should see this: {{ 'layout.navigation.menu' | t }} In the button tag delete everything but the type and the class name so it should read {{ 'layout.navigation.menu' | t }} Then add this to the bottom of your file after {% endschema %}:

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

3

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

4

Hello AAABARTON!

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

Thanks

Solution1

5

Sure. how can i reach you?

6

Hey! Did you figure out how to do this?

7

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.