Hide cart icon from header in mobile-view

[skafte]

Hi again,

Here’s another question – sorry to be a bother! (won’t be doing many customisations on this site, but there’s just a few things which would be great to change, if possible. Hope that’s cool).

So – is it possible to hide the cart icon when the mobile-menu is NOT collapsed; so that it’s only apparent next to the ‘SHOP’ menu point when the menu is unfolded? If that’s not possible, is it then possible to position the icon more precisely; at the moment (on the site that I am working on at least) the icon is too high up when the menu is toggled, but in the right place when the menu is unfolded.

Hope there’s a way! :-)

Cheers!

Jonas

[satori]

Hey Jonas,

making the shopping cart icon disappear on menu toggle would require re-writing the jQuery script that governs the behaviour of the mobile menu, yet you can relatively easily re-align the icon relative to the menu “sandwitch” icon by using some extra CSS (you can add it into the “Style: Add Custom CSS” tab of the Theme Options panel):

@media only screen and (max-width: 767px) { #wc-wrap { margin-top: -46px !important; } }

Sincerely,
Andrii / Satori Studio

[skafte]

Thanks Andrii,

I’ve now added the CSS code you kindly provided and it looks a lot better! (see for yourself here) – however only when the menu is toggled; when the menu is expanded the icon falls quite low and is not on line with the ‘shop’ menu point on the left side of the menu. Do you think there’s a way to adjust this so that ‘margin-top: -46px’ only applies when the menu is toggled?

Thanks!

Jonas

[satori]

Hey Jonas,

I’ve decided it would be too specific to keep the shopping cart icon visible when the mobile menu is opened, because different users of the theme might have different menu items at the end of the menu. Thus, to make the solution more generally applicable, I’ve changed the mobile menu script so that it hides the cart icon once the menu is expanded. The changes are also contained in the files that I’ve sent you concerning the other current issue (the fixed top section, see https://satoristudio.net/forums/topic/sticky-header-issue/). Please let me know if it works!

Sincerely,
Andrii / Satori Studio

[skafte]

Tres bien, merci beaucoup!

Worked brilliantly! :-)

Thanks,

Jonas

[satori]

Glad to hear!

Best,
Andrii / Satori Studio

[Author]

Posts