bulid a menu at Magento ver. 2.4.3 occur bugs

Problem: when i bulid a menu at Magento ver. 2.4.3 website, i can’t  bulid a useful menu , it occur bugs.  But i do it the same at Your demo backend, it works. So, can you tell me why?
 
The menu:
menu-->child_menu-->menu1-->menu11
                              -->menu2-->menu21
 
Result: wrong!

<div id="child-content-118" class="child-content-inner" style="width: 800px;">
   <div class="mega-col column1 first" style="width: 800px;">
      <ul class="level1 drilldown-sub">
         <li class="mega first group" id="menu119">
            <div class="mega-col column1 first" style="width: 200px;">
               <ul class="level2">
                  <li class="mega first group" id="menu120">
                     <a href="#" class="mega first has-child"><span class="menu-title">bitest1</span></a>
                     <ul class="level3 drilldown-sub">
                        <li class="mega first" id="menu121"><a href="#" class="mega first">bitest1</a></li>
                     </ul>
                  </li>
               </ul>
               <div class="mega-col column2 last" style="width: 200px;">     <--  bug here -- >
                  <ul class="level2">
                     <li class="mega first group" id="menu122">
                        <a href="#" class="mega first has-child"><span class="menu-title">bitest2</span></a>
                        <ul class="level3 drilldown-sub">
                           <li class="mega first" id="menu123"><a href="#" class="mega first">bitest22</a></li>
                        </ul>
                     </li>
                  </ul>
               </div>
            </div>
         </li>
      </ul>
   </div>
</div>

 
expected Collect html structure should be below :

<div id="child-content-118" class="child-content-inner" style="width: 800px;">
   <div class="mega-col column1 first" style="width: 800px;">
      <ul class="level1 drilldown-sub">
         <li class="mega first group" id="menu119">
            <div class="mega-col column1 first" style="width: 200px;">
               <ul class="level2">
                  <li class="mega first group" id="menu120">
                     <a href="#" class="mega first has-child"><span class="menu-title">bitest1</span></a>
                     <ul class="level3 drilldown-sub">
                        <li class="mega first" id="menu121"><a href="#" class="mega first">bitest1</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
            <div class="mega-col column2 last" style="width: 200px;">   <-- right ! -->
               <ul class="level2">
                  <li class="mega first group" id="menu122">
                     <a href="#" class="mega first has-child"><span class="menu-title">bitest2</span></a>
                     <ul class="level3 drilldown-sub">
                        <li class="mega first" id="menu123"><a href="#" class="mega first">bitest22</a></li>
                     </ul>
                  </li>
               </ul>
            </div>
         </li>
      </ul>
   </div>
</div>

 
 
bugs:
Column2 is not in the right place, html structure is wrong
 
 

8 answers

Profile photo of ubdev Staff 98030.00 $tone September 17, 2021
Public

Hi Ping Liu,
Please provide us your instance information, we will check and get back to you: 

  • URL and admin credentials of your M2 instance
  • SSH credentials of your M2 instance
  • Let us know the path to your M2 folder

Please make sure you mark your reply private or simply switch this ticket to the private mode, then it’s safe to share your site information here. 
Regards,
Uberthem team
 

#1
Profile photo of Ziven Staff 100280.00 $tone October 14, 2021
Public

Hi Ping Liu,

1.  sequence is wrong.  not act like the backend setting

I tried to flush your Magento cache and the issue was no longer in place: 
Backend: https://www.dropbox.com/s/sc8mli07plkogc7/2021-10-14_13-38-07.png?dl=0
Front-end: https://www.dropbox.com/s/1kjwrfw4ss9ypr2/2021-10-14_13-38-32.png?dl=0

2.  the picture is not show. #pic001 without picture show out. 

This item referred to the Mega Content and it was not displayed due to your current setting: https://www.dropbox.com/s/x6gsurnw9kqo4lt/1.png?dl=0
https://www.dropbox.com/s/5tgpp8el1iq4h28/2.png?dl=0

You should multi-select all devices in the field “Display Mega Content On” instead of enabling only the Mobile device. I helped to enable that for you already https://prnt.sc/1w32xhw. 
(Note: for any changes you might make, you need to clean cache to apply them on the frontend.)  

3.  we test several environment , some are normal, some are  unnormal . many issue occurs. I give you a normal site :   http://test.tenflect.com/

If you saw other issues besides the two issues above, please let me know more details. Any illustration screenshots will be helpful.

Best Regards,
Ziven.
 
 

#5
Profile photo of Ziven Staff 100280.00 $tone October 15, 2021
Public

Hi Ping Liu,

1, when you first visit the https://dev.tenflect.com/  ,  you can see this:  
 . https://d342amfe2z7r4h.cloudfront.net/111111111111.png 
the nav not work well.  But when Ctrl+f5 flash it , it become ok

I’ve updated the code in the file: /app/code/Ubertheme/UbMegaMenu/view/frontend/web/css/source/module/_horizontal.less.
The issue when you press F5 should be resolved now. We will include the fix in the upcoming release of our module. 

2, when we put the module to our production env,  it show not good, it scrap, slowly to become a nav.
https://production.tenflect.com/ 

You need to update the file: /app/code/Ubertheme/UbMegaMenu/view/frontend/web/css/source/module/_horizontal.less in your DEV instance https://dev.tenflect.com/ and re-compile static-files. Once done, please let me know it how goes.
Best Regards,
Ziven.

#8

Please login or Register to Submit Answer

Written By

Comments