Menu no longer sticky after the last Wordpress-update

Hello,

After the last Wordpress-update (5.6) the menu in Moesia is no longer sticky. Can you please help?

Thank you in advance!

Hi,

Can you share a link to your website here, so I can take a direct look?

Regards,
Kharis
aThemes Support

Hi again,

Thank you for your reply!
Unfortunately, I have rolled back to an earlier version of Wordpress due to this problem with the menu. So for the moment the menu works at it should, but as soon as I update to Wordpress v.5.6 the problem will be there again.

I hope you can solve this problem, so I can update to a newer version of Wordpress.
Thank you in advance!

Hi,

As checked, the Moesia menu is still sticky running on latest version of WordPress (5.6).

It seems likely the issue is specific to your website’s configuration or perhaps something else. Please share a link to your website here when you update to 5.6 to allow me inspecting it directly.

Regards,
Kharis
aThemes Support

Hi again,

Here is a link:
https://nestor.kayenne.nu/

A you can see, the menu is no longer sticky.

I hope you can help me!
Thank you in advance!

Hi,

Thank you for sharing the link.

Visit your website’s admin area, and enable the option that reads “Stop the nav bar from being sticky?” under the Menu section.

Regards,
Kharis
aThemes Support

Hi again,

Thank you for your reply!
This box wasn’t checked.
So I checked this box, updated the site and then clicked on “LiteSpeed Cache Purge All”. Nothing changed.

And then I unchecked the box again, updated the site and then clicked on “LiteSpeed Cache Purge All”.
Nothing changed.

So nothing was changed dispite if this box was checked or unchecked - it was still the same. So the problem is still there.

Thank you!

Hi,

Thank you for updating me.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .sticky-wrapper.is-sticky .top-bar {
        position: fixed !important;
        top: 0;
      }
    }

Regards,
Kharis
aThemes Support

Hi again,

Thank you for your reply!
I added the extra CSS code, but unfortunately it didn’t worked.

Hi again,

The days around New Year I accidentally deleted this website, but I have now restored the site again. And today I have also updated Wordpress to v. 5.6 - and as you can see, the problem is still there, i.e the menu in Moesia is no longer sticky since the last WP-update (v. 5.6).

Can you please help me with a solution?
Thank you in advance!

Hi,

I visited your website and the header bar is properly sticky when scrolling.

Here is the screencast when checking:

moesia-fixed-header-bar

https://drive.google.com/file/d/1WLtOyJLN_oWnFReVvVdSGaQpLI51P1wr/view?usp=sharing

Sees likely there is an active cache on your website that has been enabled with the LiteSpeed Cache plugin and it should be flushed. Also, try clearing your web browser’s cache, history, and restarting it. Then check your website and see whether the issue still appears or not.

Regards,
Kharis

Hi again,

Thank you so much for your reply!
I am using Firefox and in Firefox the menu is not sticky.
After I read your reply I also checked the website in Chrome and in Edge - and you are right, in Chrome and in Edge the menu is sticky!! :slight_smile:

Can you please check the website in Firefox and see how the menu looks there?

Thank you very much for your help!! :pray: :+1:

I was using Firefox when taking screencast.

Perhaps you aren’t using the latest version of Firefox?

Regards,
Kharis
aThemes Support

Hi again,

Thank you for your reply!
OK, that was interesting!

I am using Firefox v.82.0.2 (64-bits).
Today I emptied the cache and restarted the computer (in case maybe this was causing the problem), but the problem with the menu is still there - the menu is still not sticky in Firefox on my computer.

I did a video on how the menu problem looks on my computer in Firefox (the menu problem is only in Firefox). The file was to big to attached here, but you can view the video or download the video on the link below (on sprend.com). I really hope you can find a solution that solve this problem.

Link to the video:
https://sprend.com/download?C=b7750f2b509842d5a78ce310749f93f1

Thank you in advance!!

This problem still remains in Firefox.

Hi,

It is very stange, you may not believe it, but your website’s menu bar is still sticky. I checked once again and here is the screencast.

moesia-sticky-menu-bar

https://drive.google.com/file/d/1DAXSfT-BoDNY86qe2KAGyhvr5BTa6QDQ/view?usp=sharing

What is your screen resolution? Perhaps it makes the different.

Regards,
Kharis
aThemes Support

Hi again,

Thank you very much for your reply!
Yes, it is very strange! My screen resolution is 1680 x 1050.
And it’s only in Firefox that the menu not is sticky …

Thank you very much!

bild

Hello Guys,
I encountered the same problem, which has been described by Trew and I’ve solved that using the newest version of jquery.sticky.js plugin. All what you need to do is:

  1. Replace above file to the newest version. You can find them on the official delevoper’s website.
  2. Create the new file sticky.js, add to them belowe code and put them to moesia/js folder:
    $(document).ready(function() {
        $(".top-bar").sticky({ topSpacing: 0 });
    });
  1. Enqueue in your functions.php file the compatible version of jQuery above the position of jquery.sticky.js. The jQuery library, which I’ve tested is: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js.
  2. Below the line with enqueued jquery.sticky.js add the other line with enqueue your stisky.js file.
  3. Edit the js/scripts.js file and find the line with comment “Make the menu sticky” and detele or comment all of this code:
    jQuery(function($) {
        $(window).bind("load", function() {
        $(".top-bar").sticky();
        });
    });

That’s all. Enjoy!

1 Like

Hi mich,

Thank you very much for your engagement in finding a solution. I have looked at your suggestion, but that was a little to complicated for me. But you gave me an idéa - so I have found another solution that seems to work.

Solution: I installed the plugin myStickymenu, and after that the menu bar is sticky even on mobile phones (and I guess it’s sticky even on tablets). If anyone would like to test this plugin and check if it works correctly, please do it - it would make me happy!!

In the plugin “myStickymenu” --> go to “Sticky menu settings” and under “Sticky class” choose “Other class or menu” in the drop-down-list and enter .top-bar
Then, just do the adjustment that fits to your website (like bg color and text color …).

Thank you very much for your help!! :slightly_smiling_face:

In plugin myStickymenu:
bild

1 Like

Hi,

Glad to hear you found a plugin that works. I’d like to try and do some testings with it. Can I ask whether it is the plugin you’re using?

Regards,
Kharis
aThemes Support