Question Issues with menu display

[BoBru___]

Hi everyone,

I really hope someone here is able to help me with a menu issue I can't solve.
I've helped one of my friends, who's a psychologist, with building a website for a new Foundation she's starting next year. It's a great cause and, even with my small knowledge regarding Wordpress, I thought I would give it a shot and build the site with Elementor.

This actually went quite well and I really enjoyed working with it! The site was almost finished until the menu display completely changed from a nice menu bar to some dotted version.

Please see here a screenshot of what has happened (sorry, the website is in Dutch):

Top menu bar:

Main menu bar:

I'm not quite sure what have caused the issue. Might've been caused by a plugin update?
I love to always solve issues myself but unfortunately, this one I can't seem to figure out.

Really any help will be highly appreciated.

Thanks so much!

 

[shaunm]

Hello! I think I can help - have you tried to go WordPress Dashboard > Elementor > Tools and then click on the two buttons: Regenerate CSS and Synch library. That sometimes will fix this type of issue. If it persists, respond with a link to the site so I can see how you added the menu to the header. Is it a horizontal navigation menu? It looks like there are drop downs. Are you using the Nav Menu element to add the menu or some other add-on or plugin?

Cheers,

Shaun

 

[BoBru___]

Hi Shaun,

Thank you so much for your response, really appreciate your willingness to help me!
I've tried what you suggested but unfortunately it didn't solve the problem (that would've been to good to be true, haha).

I indeed used a horizontal navigation menu. There are actually two menu's in the header (one menu for getting in touch above the main photo, and the main menu underneath the photo that indeed has multiple drop downs). Please see the site here:

stichtingzaingeving.nl

I'm using the Opal theme and have some Opal Add-ons. So all my menu's are Opal navigation menu's.

Really hope you might know a solution, I can't seem to figure it out.

Thanks!

 

[shaunm]

Hello!

I see what the issue is - you have mixed content on your site - meaning that you have some content that is being served as http and some as https. What happens is that the non-secure content (http) is being ignored on page load, so it breaks your menu. If you right click on the page, Inspect the page and go to Console to see this.

One way to fix this to do a search and replace of the non-secure url (with http) with the secure version (https). It is important that you first backup your site with your host just to be safe.

Here are the steps:

1. Backup your site
2. Go to your WordPress Dashboard > Elementor > Tools > Replace URL tab.
3. Then where it says "Old URL" enter your url with http
4. Where it says "New URL" enter your url with https (see screenshot)

This replaces any links throughout the site with https version and should fix the issue.

Cheers,

Shaun