Different mobile menu for different pages

Hello. I need your support on this issue. https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/20264492/comments

As described, there is a problem setting up different menu for different pages. Header builder is very nice and easy to create navigation menu, but the problem starts because this is not working on mobile screens.

I have created two different header menus with Header builder. Then I applied one header to few pages, and another header for other pages. This works on desktop, but for mobile phones none of these work. I saw an option to add mobile menu. I added mobile menu within wordpress Menus by clicking a box that says ‘Mobile Side Menu’.
https://prnt.sc/xYuNPUVfetSG

The problem is that only one Mobile Side Menu can be applied. This means I can’t have different header/menu for different pages. I can only have this on desktop.

Can you add an option to Mobile menu element settings (in Header builder) https://prnt.sc/1qzkzn4TJ8kH
so I can choose which menu I want to use for it? Like you have here: https://prnt.sc/XxU_qhgzUo5E

This is also not possible for footers.

Hello,

Try to select a mobile menu in the categories field – https://prnt.sc/PbA9Jw39hBlg and rename the title to another one. If such a solution suits you, then we can hide the mobile menu tab via custom CSS, and leave the “categories” menu which has another title and desired menu selected – https://prnt.sc/PQupRXhM1317

Kind Regards

Okay. Let’s try that.

However, what about footer? How to set different footer? I need the same-looking footer, but different links.

forgot to send you link:

[Luke Nielsen]

Hello,

I have defined the menu for the categories tab, then it was renamed to “Menu” – https://prnt.sc/ZurPLGKeFEmS
, defined the mobile menu – https://prnt.sc/DIcGcjELfD-9

Then you need to define the code below in Theme Settings -> Custom CSS:

.mobile-nav .mobile-pages-title {
    display: none;
}

.mobile-nav .wd-nav-mob-tab>li {
    flex: 1 0 100%;
    max-width: 100%;
}

As a result, you will have something like this – https://prnt.sc/h06CqwIwR9VH

2. You can create a Footer via HTML BLock, and by using presets define different footer for different pages – https://xtemos.com/docs-topic/theme-settings-presets/

Kind Regards

• This reply was modified 6 months, 3 weeks ago by Luke Nielsen.

Hi. I did what you suggested and created a categories menu, added your css, but can you please tell me how to remove this: https://prnt.sc/rp-xpg_CpA7j

As for the footer, I did recreate normal footer with html blocks, and it looks the same, but it does not behave the same. I added custom css to change the color of menu links, on hover links, but I don’t know how to make it close/fold on mobile devices, like this:
html block footer: https://prnt.sc/ZVXnaMp3S4eA
regular footer: https://prnt.sc/dSHf-AwiOMzu

Also, I don’t understand the PRESETS feature. Please explain how to make some pages use my html block as their footer (as you suggested earlier)?

Thanks

Hello,

1. Update access to the admin panel – https://prnt.sc/IaYgJV66ae-R

2. Create a preset with the condition that is related to the specific page – https://prnt.sc/cxmDkM6fdk74 or https://prnt.sc/6-J0E156owur

Then edit its settings https://prnt.sc/OIQmSVZ9SMWo and change the footer – https://prnt.sc/QcNsyJ2YZRNF

Kind Regards

Admin panel is activated. The username and password are the same as last time.
Try now.

Thanks

Hello,

1. It looks like you have removed this https://prnt.sc/rp-xpg_CpA7j panel – https://prnt.sc/tXbA3P0bQh2g

Let me know if I missed something.

Kind Regards

Check the private content section.

Hello,

Use the code below for help:

.mobile-nav .wd-heading,
.mobile-nav .wd-nav-mob-tab {
    display: none;
}

Clear the cache and recheck the issue.

Kind Regards

[Author]

Posts