Header Builder – Mobile Menu – Show HTML Blocks

Dear,

I’ve assigned HTML Blocks to items of my menu, and it’s showing well except that there is misalignment at the top & the bottom. Why is that the case?

How can I fix this alignment? or is it an issue of the theme?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

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

.wd-nav-mobile.wd-html-block-on .menu-item-has-block>.wd-sub-menu {
border-bottom: none;
}
.wd-nav-mobile>li>a,.wd-nav-mobile>li>ul li>a {
	border-bottom: none !important;
}

Best Regards.

Hi Aizaz,

The code you provided me doesn’t resolve my issue.
Kindly reinvestigate this problem as per my initial explanations.

Thanks

Hello,

Please share the wp logins details in private content under the message area i will check and give you a possible solution.

Best Regards.

see private

Hello,

Your issue has been resolved.Check back your site after completely clearing the browser cache.

Best Regards.

It looks good now, can you explain me what changes you did? So that I can understand what was the problem, and to reproduce it on my live site. Thanks

You simply disabled the Box Shadow, right? But I prefer to keep it enabled.

I want to keep the Box Shadow enabled for desktop, and disable the alignment issue on mobile.

Hi,

Sorry for the misunderstanding, you can keep your box-shadow options enabled. This issue is initially caused by empty <p> tags that both add 20px margin before and after HTML-block content (screenshot https://prnt.sc/ZRV-HBNnhn6R, video). Try to apply patch 500743 which removes these empty <p> tags.

Kind Regards

Hi Bogdan,

I applied the last patch and now the behavior of the Mobile Menu with HTML has become completely messed up!

When expanding the menu/submenu levels, the arrows disappear from the screen.

Look the video in private. Please check what is going wrong.

THanks
Simon

Hello,

1. Mobile menu left spacing. Issue that is shown on video, not related to the patch. It is caused by your custom CSS located in theme settings (check the video https://gyazo.com/284ae2ba7acca074c134b84f187254c7). Try to remove this (https://prnt.sc/7S1E3e18V3QD) custom code and check again.

2. Initial issue with empty space above and below the mobile menu HTML-block. Patch 500743 should have fixed this problem, but for some reason, changes are not applied. It can be caused by wright rights on your server or by other reasons. To check the cause of the issue, and apply patch changes manually, we need access rights from your “kbconsulting” site on which you applied the patch and recorded the following video.

Kind Regards

Hi Bogdan,

For Point 1. I’ve disabled on my live site the Custom CSS which you mentionned in the video, but I still have the same problem when expanding the First Item in Main Menu Level > Second Item in Sub Menu Level (screenshot 1).

For Point 2. I gave access previously in this thread to a staging where you can do any investigation you want.

Thanks
Simon

Attachments:

You must be logged in to view attached files.

Hi

1. Mobile menu dropdown opener. This issue is not related to the patch 500743 or your previous custom code. It is caused by the combined width of your HTML-block content, which is wider than the mobile menu itself (the default mobile menu width is 300px). You can use the following custom code to limit mobile menu dropdown content to mobile menu width, but in that case, all overlapping content that is wider than 300px will be cropped.

.wd-nav-mobile.wd-html-block-on .menu-item-has-block>.wd-sub-menu {
	max-width: 300px;
}

To fix your issue properly you need to inspect your HTML-block content, reduce its overal size, paddings, margins, width, font size, disable “Row stretch” option, and wrap all columns in the rows one under another to ensure that the combined width of your HTML-block is not wider than the mobile menu itself.

2. Initial issue with empty space above and below the mobile menu HTML-block. You provided access to site https://wordpress-573315-3907141.cloudwaysapps.com/ where patch 500743 was applied (screenshot https://prnt.sc/PYa4XzcXAnZo) and problem with empty space created by empty <p> tags issue is already fixed (https://prnt.sc/Fl2CyJpJmq9Y).

In your first reply (https://xtemos.com/forums/topic/header-builder-mobile-menu-show-html-blocks/#post-498789) you provided the link to the site https://www.kbconsulting.be/, further, you capture the video on the following https://www.kbconsulting.be/ site in this reply (https://xtemos.com/forums/topic/header-builder-mobile-menu-show-html-blocks/#post-500951). As we mentioned, in our reply (https://xtemos.com/forums/topic/header-builder-mobile-menu-show-html-blocks/#post-501184) to fix your issue on your https://www.kbconsulting.be/ site we need to get access to the site where this video was captured.

Kind Regards

Ok I think it’s all good now with your reply, and with the last release & patches

You can close this ticket, thanks!

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. 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