CSS BROKEN (drop down menu)

Hi,

I have a problem on my website with the lastest version wordpress.
I have a display problem with my drop down menu.
The right version (official website) : https://www.colinvautiercoiffeur.fr/
The version with the problem (site test) : https://test.trazdd.site/
I tried to install a plugin migrate javascript but it doesn’t work.
Have you got a code to fix that?
Thanks

Salut, can you provide a bit more context about the issue? I tried both dropdown menus and they appear to be working the same.

The only difference I noticed was that in the version with the alleged problem, there’s a bar above the parent menu items.

the drop down menu works with wordpress 5.5
The problem has occured with wordpress 5.6
The website is made with betheme (pre-built website)


I uploaded a photo ( the menu diplay is realized by theme options header subheader)
I think the theme is old perhaps.

The problem disappear with plain version but the hover is too big;

Thread moved to JS forum

The page that is working has this script:

<script type='text/javascript' src='https://www.colinvautiercoiffeur.fr/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-js'></script>

If I swap that script into your new page then it all starts working.

As JS (or wordpress) is not my area I will leave it to the JS gurus to point you in the right direction as this is not a css or html issue. :slight_smile: It looks like you need the old version of jquery.

1 Like

hello,
Can JS gurus help me for my question?

Thanks

Until a js guru drops by my observations may help a little. :slight_smile:

I notice that in this js file.

<script type='text/javascript' src='https://test.trazdd.site/wp-content/themes/betheme/js/scripts.js?ver=17.8.6' id='jquery-scripts-js' defer></script>

There is an undefined error for the variable called rightW.

var rightW = $('.top_bar_right').innerWidth();

There doesn’t seem to be a top_bar_right element and so returns undefined and the width never gets set on top_bar_left.

  var leftW = parentW - rightW;
  $('.top_bar_left, .menu > li > ul.mfn-megamenu').css('width', leftW);

It’s that lack of width that is breaking your top menu.

If I check for undefined and set a zero value if not found then the page starts to work.
e.g.

 var rightW = 0;
        rightW = $('.top_bar_right').innerWidth();
        if (typeof rightW === "undefined") {
          rightW = 0;
        }

Here is the section to replace with the extra code in place.

 /* ---------------------------------------------------------------------------
       * Header | Top bar left | Width
       * --------------------------------------------------------------------------- */
      function mfn_header() {
        var rightW = 0;
        rightW = $('.top_bar_right').innerWidth();
        if (typeof rightW === "undefined") {
          rightW = 0;
        }
        if (rightW && !$('body').hasClass('header-plain')) {
          rightW += 10;
        }
        var parentW = $('#Top_bar .one').innerWidth();
        var leftW = parentW - rightW;
        $('.top_bar_left, .menu > li > ul.mfn-megamenu').css('width', leftW);
      }

Try replacing that section of code and see if it sorts the issue for you. If not then you’ll have to wait for someone more knowledgable in JS to come along :slight_smile:

thanks Paul,
i replaced the code in the filejavascript but the problem is not fixed
https://test.trazdd.site/

Are you sure you uploaded it as I’m still seeing the old file even after clearing cache.

https://test.trazdd.site/wp-content/themes/betheme/js/scripts.js?ver=17.8.6

It doesn’t have the replaced code I mentioned.


it’s very strange, i copy your code on my files
you can see my ftp photo
On Google chrome, nothing changes
Must i copy my javascript folder in my child theme?

Hi, it sounds like a Wordpress issue to me and maybe your theme plugin is cached. I don’t do WordPress but theres some info here about the wordpress cache (as opposed to browser cache).

Sometimes renaming the file can help avoid only the cached file being retrieved but I don’t know if that applies to wordpress and it all gets bundled together.

thanks i desactivated wp rocket (cache) and firefox
i don’t understand,
the theme is old (2016).
when i delete the file script.js nothing is happening

I’ve moved the thread to the wordpress forum as this seems to be more of a CMS question than a js or html issue

ok thanks, you think someone can help me for this particular problems