Menu block shows as vertical list

[MarkH]

Hi there. Cwicly newbie here working through the getting started docs. I’m having frustrating issues with the menu block on the header menu. I’ve created the menu and attached it to the block. But instead of showing it as a horizontal row it shows as a vertical bullet point list. Yes I’ve tried switching between horizontal and vertical but no luck. And I’ve tried a WP Reset in case anything had screwed up the installation but again nothing.

Any ideas, it’s driving me crazy .

Cheers,
Mark

[Araminta]

Hi @MarkH,

Welcome to the community!
Sorry to hear about this.

Could you make sure your website is using SSL, you can follow these steps:

1. In the WordPress admin dashboard, go to Settings > General.
2. In the “WordPress Address (URL)” and “Site Address (URL)” fields, verify that the URLs use “https” instead of “http”.
3. If the URLs use “http” instead of “https”, update the URLs and save your changes.
4. Open your website in a web browser and verify that the URL in the address bar begins with “https”.
5. If the URL does not begin with “https”, try clearing your browser cache and cookies, or try accessing the website from a different web browser.

Please let me know if this helps!

[MarkH]

Hi @Araminta

Yes my site is set up to use HTTPS. I’ve tried different browsers (Brave, Safari, Chrome) and have noticed that the menu is displayed correctly on the frontend but not on the backend. Is there a setup step I’ve missed?

Thanks,
Mark

[MarkH]

Hi @Araminta

I decided to push on and got to the modal menu section. I’m still seeing the bullet list issue. But now I’m also getting another issue where I can’t set the font family. Something is really strange here. Any ideas?

Thanks,
Mark

[Louis]

Hi @MarkH,

Sorry to hear about the trouble you’re experiencing.

Do you by any chance have HTTP Authentification set on this installation?

Thanks.

[MarkH]

Hi @Louis

no HTTP Auth set for this as far as I know. But this got me thinking about maybe it was the local dev install setup. I mainly use Laravel Valet so I rolled up a Local env and the same thing happened. So then I tried in a remote hosted environment and it worked!

A key difference between what happened on the local vs remote environments was that the add menu dialog wasn’t displayed correctly in the block. Instead of

I saw this:

Does Cwicly need some special setup to work correctly on a standard local environment under Valet or Local?

Thanks,
Mark

[Louis]

Hi @MarkH,

Thank you very much for the details on this one and for your investigation.
Can you confirm that you are working on a Windows environment? If so, this makes me think that this is linked to what @Marius was/is experiencing on his side: Menu Block - #14 by Marius

I had already promised to investigate the issue back then but haven’t done it yet… Mea culpa!

Will try to find a moment in the coming days to get my hands on a Windows PC and check things out.

Cheers,

[MarkH]

Hi @Louis

No this is on a Mac - latest OS.

Cheers
Mark

[Marius]

Interesting.
Makes me more confident that there is a simple solution out there.

[Louis]

All of us here in the Cwicly team use Local and other development environments on Mac and haven’t run into this issue once, so I’m surprised to see this.

First of all, is this happening on the Post Editor AND Site Editor, or Site Editor only?
Have you tried with a simple non SSL version on your local installation?
Could I possibly have a screenshot of your browser console on the backend when editing a page?

Thanks in advance.

[MarkH]

Hi @Louis and @Marius

OK I’ve been doing a bit more investigation and think I’ve identified the source of the issue:

1. This occurs on both site editor and post editor
2. The error does not occur if I try it in a non-SSL instal
3. The console shows what looks like the same messages for both ssl and non-ssl when it comes to adding the menu to either the post or the global part.
4. An error is logged when opening or refreshing the Themer page, it’s trying to serve insecure content across https. Screen shot attached.
   
   

I’ve got additional screen shots from both the non-ssl and the ssl installs available if you need them. But this one looks to be the main culprit.

Cheers,
Mark

[Louis]

This underlines an issue on your set-up as @Araminta first suggested.

Can you share with me a screenshot of your Settings > General page please?
Thanks in advance.

Cheers,

[MarkH]

Ugh you are right, I forgot to change the settings on the general page for the clean build. So I’ve updated those settings and the https errors go away. But unfortunately the menu item is still not appearing correctly. The warnings in the console appear before the menu item is added.

[Louis]

Thanks for this, I really appreciate you taking the time going through this.

Finally, might I ask how you are trusting/signing the SSL certificate?

[Bovelett]

Hi @Louis I’m on a Mac, and experience the exact same problem. I work online, not local, and my urls are set to https. Is that any info I can share with you that helps in resolving this?

PS I use LetsEncrypt.

[Louis]

Hi there @Bovelett,

Sorry to hear you’re having trouble.
Could you send temporary access to your installation at support@cwicly.com if possible?
That would be great!

Thanks in advance.

[Bovelett]

Sure I can. In the meantime, here’s the error I get from the console in the backend.

[Louis]

Thanks.
Do you by any chance have HTTP Authentification on to access the installation? That 3rd warning (CSS Error) suggests so.

[Bovelett]

Yeah. I sent you an additional mail with the credentials.

[Louis]

Thanks, although this is the issue

Not specifically linked with Cwicly but more Gutenberg who loads assets through an HTTP call.
You’ll either have to whitelist your own server IP in the .htaccess for HTTP Auth or remove it altogether.