Changing the sidebar and mobile menu icons and labels

I’m aiming to create a mobile-only shopping site where the sidebar reveals the product filter options, and the mobile menu reveals a directory list of stores featured on my site. To this end, I need the sidebar and mobile menu to be rebranded.

NOTE: The desktop version of my site is just a landing page that prompts users to visit my site on their mobile devices.

SIDEBAR CHANGES:
Nav Bar Icon – Replace the default three dots icon with “https://inventoury.com/wp-content/uploads/2021/03/filter-now.svg”.
Nav Bar Label – Replace the default text with the word “Filter”.

MOBILE MENU CHANGES:
Nav Bar Icon – Replace the default three lines icon with “https://inventoury.com/wp-content/uploads/2021/03/store-map.svg”.
Nav Bar Label – Replace the default text with the word “Stores”.

Hello,

To change the icon of the mobile menu you need to Go to Woodmart >> Header Builder >> Edit Header >> Mobile header on the right top >> Edit mobile menu and set the icon.

Screenshot for Clarification: https://prnt.sc/10jiqke

To change the text of the mobile menu you need to install and use the loco translate plugin and choose the correct path to translate the string.

Your path will be Dashboard >> Loco translate >> Themes >> Woodmart.

Or you can watch our detailed videos on how to translate string using loco translate: https://www.youtube.com/watch?v=D3NsDdMzsls

And for the sidebar please provide the URL where the sidebar is added to check it myself and help you out accordingly.

Best Regards

URL where the sidebar is added: https://inventoury.com/fox-hub/

If for some reason my requested changes for the sidebar are too complex, is it possible to trigger the built-in/default WordPress filter on pages that aren’t the shop page? The Woo-commerce Product Table plugin that I’m using allows me to create product tables on any page I choose, can you provide a code that triggers the default woo-commerce filter on pages that aren’t the default shopping page?

Mobile Menu Solution You Provided
Apologies for not being clearer earlier, but I have exhausted the solutions you provided multiple times before and none of them work, which is why I came to this forum.

I’ve tried changing text labels using the loco translate method provided on your site and it has never worked once.

I’ve tried changing the mobile menu icon by uploading a different image via the header builder and for a few months now it has stopped working.

These reasons are why I requested the changes I first described.

Performing mobile menu changes via the Edit Header option only changes the icon in the header section, it doesn’t affect the mobile menu icon in the Nav Bar.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.woodmart-burger-icon .woodmart-burger::after, .woodmart-burger-icon .woodmart-burger::before {
    content: "";
    position: absolute;
    background: URL(https://inventoury.com/wp-content/uploads/2021/03/store-map.svg);
    background-size: contain;
    width: 20px;
    height: 20px;
}

.woodmart-sticky-sidebar-opener:not(.shop-sidebar-opener):after {
    content: "";
    background: URL(https://inventoury.com/wp-content/uploads/2021/03/filter-now.svg);
    background-size: contain;
    height: 25px;
    width: 25px;
}

And for the labels text edit the translation file and Click the sync button first then find the strings and translate.

Best Regards

Thank you, I’m working on re-installing Loco translate to try the steps you proposed.

The code you provided has replaced the Nav Bar icons, but the sidebar icon is repeating and the mobile menu icon is repeating and overlapping onto the label below. See the screenshot attached.

Hello,

You are Most Welcome.

I have visited your website and the sidebar icon is not repeating but is unaligned. Please add the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.woodmart-sticky-sidebar-opener:not(.shop-sidebar-opener):after {
    content: "";
    position: absolute;
    background: URL(https://inventoury.com/wp-content/uploads/2021/03/fghjk.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    width: 20px;
    left: 15px;
    top: 15px;
}

And I am unable to see the screenshot you attached. Please make sure that you added it correctly to check it myself and help you out accordingly.

Best Regards

[Author]

Posts