Shopify themes, liquid, logos, and UX
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.
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
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
Hello AAABARTON!
Yes I can sort it out you can reach me for more discussion
Thanks
Solution1
Hey! Did you figure out how to do this?
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024