Symmetry Theme - hamburger menu on desktop?

Store Design
1

Hi all! Trying to switch my menu to show the hamburger menu on desktop - it shows on mobile by default but the only options in the theme editor are left, underneath, or center. Any ideas of what code I should enter to show the hamburger dropdown on desktops/computers? I’m using the Symmetry theme! https://themes.shopify.com/themes/symmetry/styles/beatnik

2

@sbar - can you please share your website link?

1 Like
3

Hi - thanks for taking your time to reply! here is a link: https://wfg79srzy7x2x483-14978044.shopifypreview.com

4

@sbar - I checked it, but it is quite difficult to get it working on desktop using css as it needs combination of CSS as well as javascript working, you will need some expert developer or contact theme support.

5

Hi, thank you so much. I’ve seen this doable with over themes + the free themes - any idea on what java I should use? I can handle the CSS!

1 Like
6

@sbar

do you mean like this?

KetanKumar_0-1654970320571.png
KetanKumar_0-1654970320571.png1920×1080 372 KB

1 Like
7

Yes!! :slightly_smiling_face:

1 Like
8

@KetanKumar yes! Any suggestions?

9

@sbar - bringing menu on desktop view is very easy, it can be done via css… after that when you click on 3 lines then menu drawer should appear like it appears in mobile and should get closed after ‘x’ button is clicked.

This part will need javascript.

10

@sbar

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

11

Do you have an idea of what java is needed?

12

I got the CSS down, but can I edit the current javascript or do I have to write something new? The current to enable/disable the mobile nav is:

$(document).on(‘click’, ‘.mobile-nav-toggle’, function (e) {
e.preventDefault();
if ($(‘body’).hasClass(‘enable-mobile-nav-transition’)) {
// hide nav
$(‘body’).removeClass(‘reveal-mobile-nav reveal-mobile-nav–revealed’);
setTimeout(function () {
$(‘body’).removeClass(‘enable-mobile-nav-transition’);
}, 750);
} else {
// show nav
theme.openMobileNav();
}
});

theme.openMobileNav = function () {
$(‘body’).addClass(‘enable-mobile-nav-transition’);
setTimeout(function () {
$(‘body’).addClass(‘reveal-mobile-nav’);

1 Like
13

@sbar

can you try this code

$(document).on('click', '.mobile-nav-toggle', function (e) {
e.preventDefault();
if ($('body').hasClass('enable-mobile-nav-transition')) {
// hide nav
$('body').removeClass('reveal-mobile-nav reveal-mobile-nav--revealed');
setTimeout(function () {
$('body').removeClass('enable-mobile-nav-transition');
}, 5000);
} else {
// show nav
theme.openMobileNav();
}
});

theme.openMobileNav = function () {
$('body').addClass('enable-mobile-nav-transition');
setTimeout(function () {
$('body').addClass('reveal-mobile-nav');
14

Thank you so much! but That unfortunately doesn’t work - unless my CSS is incorrect?