Home Page – Main Menu on Mobile Design

Hello, Sir
We need help for the website -home page on Mobilephone.

Attachments:

You must be logged in to view attached files.

Hi, Sir

Attachments:

You must be logged in to view attached files.

Hello,

01. To change the background color, try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for mobile.

.mobile-nav.wd-side-hidden.wd-side-hidden-nav.wd-left.wd-opener-item.color-scheme-light.wd-opened {
    background-color: white !important;
}

To change the text color, you can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

02. Try to use the info box carousel widget in the Elementor to create like this:
https://ibb.co/fVbjXDSr

Alternatively, we encourage you to utilize the theme template library and import the relevant elements that best suit your requirements: https://xtemos.com/docs-topic/templates-library/

03. For the product carousel, use the product grid or carousel widget in the Elementor. Try to use the theme template library to import relevant elements: https://xtemos.com/docs-topic/templates-library/

04. To display your product categories as a slider and round shape, please follow these steps:

Use a Custom Layout for your Shop or Category Archive Pages, and in your custom layout:

Add the “Product Categories” widget. > Set the layout type to “Carousel” within the widget settings, and configure custom rounding.

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Best Regards,

Hello, Aizaz
We added the Custom CSS code for mobile. And found that, the Main Menu information are hidden, and only show the White Background now .
If the Custom CSS code is correct ?
Please check the attached photo for the new Main Menu on mobile phone.

Attachments:

You must be logged in to view attached files.

Hello,

Yes, it is working, but the font color is white, which is why it’s not visible., You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards,

Hello, Aizaz
Yes, changed the words at black now, the first words can be showed now.
But, on the top of the Main Menu, the Search Form ( Search for products) and Round Search ICON, can not be showed.
And the Underline on the FIRST WORDS can not be showed, and also the Second words are also can not be showed now.
Can you give me a full custom CSS class. to resolve the all questions , and instead of the Advanced typography option ?

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.mobile-nav .searchform {
    --wd-form-bg: #ffffff;
    --wd-form-color: #000000;
    --wd-form-placeholder-color: #000000;
}
html .wd-nav-mobile > li > a:hover, html .wd-nav-mobile > li.current-menu-item > a {
    color: #F44336 !important;
}

Best Regards,

Hello, Sir
We have add the Custom CSS code, and found that, there are still have 2 problems.
1. There is not the Search Form information on the top of the Main Menu.
2. There are still missed the Underline and Arrows on the Mobile Main Menu.
Please check the attached file.

Attachments:

You must be logged in to view attached files.

Hello, Sir
We have add the Custom CSS code, check the Main Menu on Mobile today. and the Search Form information can be work well now. but we found that, there are still have the following problems.
1. There are still missed the Underline and Arrows on the Mobile Main Menu.
2. When we click the position of the Arrows. ( the Arrows will be showed at all).
2. 1 We can not see the words on the BLACK Line.
2.2 There is not any information on the following , and just White background.
Please check the attached file.

How to resolve the problem now ?

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:

.wd-nav-mobile li:active>a, .wd-nav-mobile li.opener-page>a {
    background-color: #e7e7e7 !important;
}
.mobile-nav .wd-nav-opener {
    color: black !important;
}
.wd-sub-menu li>a {
    color: black !important;
}
.wd-nav-mobile>li>a, .wd-nav-mobile>li>ul li>a  {
    border-bottom: 1px solid gray !important;
}
.mobile-nav .wd-nav-opener {
    border-left: 1px solid gray !important;
    border-bottom: 1px solid gray !important;
}

Best Regards,

Thanks so much for your help !
When i add the CUSTOM code, the problems have been resolved, just 1 problem is that, the search form and search for products not showed now !
How can we make the Search PART can be work well ?

Attachments:

You must be logged in to view attached files.

Just checked again . and ALL is ok now , THANKS SO MUCH !

Hello,

Sounds great that your issue has been solved.

You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts