Mobile navigation

Hi i need some help with mobile navigation please find attached for the detailed screenshot. Thanks in advance!

Hello,

I saw the screenshots you attached.

1) Filters sidebars and the other shop page options work only in the sidebar. You cannot show them in the mobile menu sidebar.

2) To change the background of the sidebar widget on mobile. Please add the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.offcanvas-sidebar-mobile .sidebar-container {
background-color: red;
}

3) If you don’t want the mobile menu to collapse then you can remove all the sub items from the menu and add it as a menu item. From Appearance >> Menus.

Screenshot for Clarification: https://ibb.co/YTDSMtM

4) To Remove the space add the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.whb-header.whb-sticky-shadow.whb-scroll-stick.whb-sticky-real {
margin-top: -40px;
}

5) To remove the area you need to disable the shop page title from Theme Settings >> Shop >> Sidebar & Page title.

Screenshot for Clarification: https://ibb.co/2FJWfDh

6) To Remove the products per page. Add the following Custom CSS in the Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.products-per-page {
display: none;
}

7) To Move the sidebar button to the right side. Add the following Custom CSS in the Custom CSS for Mobile area.

.woodmart-show-sidebar-btn {
margin-left: 30%;
}

8) To change the show sidebar color please add the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.woodmart-show-sidebar-btn {
color: red;
}

You can set the font using the CSS as well.

9) You need to use typography settings to change the typography color. You can read our detailed documentation in the following link: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Please create separate topic for each issue that would be easy for us to understand and all your questions will be answered.

Best Regards.

Hey thanks for your quick and detailed response, appreciate it.

Couldnt remove the white spacer still..
4) To Remove the space add the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.whb-header.whb-sticky-shadow.whb-scroll-stick.whb-sticky-real {
margin-top: -40px;
}

And the announcement text cant be seen on mobile

Thanks in advance!

Hi, please find attached for the mobile navigation, to rename filter to “menu” and change icon. Thanks very much!

Hi can you please remove the attachment contect SC.pdf, it was meant to be shared privately. Thank you

Hello,

I saw the screenshot you attached.

1) For the top margin issue. Please provide with admin panel login details of the website to check it myself and help you out accordingly.

2) To Change the sidebar text you need to install and use the loco translate plugin. And then choose the correct path to translate the string according to your needs. Your path will be Loco Translate >> Themes >> Woodmart.

Screenshot for Clarification: https://ibb.co/k3SbBbw

To Translate the text filters your path will be the same as well.

Screenshot for Clarification: https://ibb.co/BnYyY3n

You can also watch the video in our detailed documentation in the following link:
https://www.youtube.com/watch?v=D3NsDdMzsls

3) To Change the filters icons you need to add the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.woodmart-sticky-sidebar-opener::after {
content: "\f115";
font-family: "woodmart-font";
}

Best Regards.

[Author]

Posts