Pro Header edit preview problems for breakpoints

Support
#1

I’m having some issues with the pro header edit preview still displaying elements that are set to not display at a particular breakpoint. This gets really bad as I add more bars or elements, then gives a warning.

This element could not render due to invalid template markup. This could be due to changes introduced by a third party plugin. The front end of your site should still function normally

But this is where it starts, I have a simple 2 bar setup, bottom bar has an inline nav, so I remove the breakpoints for mobile so I can add the collapsed nav, but in the preview, you still see the inline nav.

I’ve tried clearing cache, disabling plugins, etc. but nothing seems to work. I can still design the header, with the warning and it works fine. However it’s display is messed up in the header editor as well as when editing pages. Customer probably won’t like that. :wink:

Everything is up to dates

Need a little help on this one.

Thank you…

Not sure this is a related issue, different site, same server, same issue with header edit displays for breakpoints, now I notice that when trying to save preferences I get an error. The preference is still saved/change, but it displays this error.

Never had issues like this?

#2

Hello @Dkime,

Thanks for writing in!

I have logged in and investigated your issue. I could not replicate any of it.
When I edit one of your header, I am seeing this:

There are no errors or warning that I encountered. I am editing the “CPD Landing 01” by the way. Please clear your browser cache or use private browsing mode and edit your header again.

Please let us know how it goes.

#3

Thanks, but that’s not the header assigned or being used. Please login again and look at the header that has (x support) in the name. You looked at the first version of the header that doesn’t have the breakpoints set. So you won’t see anything.

Look at the x support header which is a copy of the head assigned to the page. Then click on the preview for the different break points and you will see what’s happening.

I’ve checked this on a 3rd site, different server, same thing.

thanks

#4

Hello @Dkime,

I have checked your header and I fixed the issue. There was a corrupted navigation collapsed which has cause the issue.
It is displaying correctly now.

Please check it again.

#5

I don’t see what you did or where you did it? Were not on the same page here.

This is about the pro header preview when editing, it displays bars and elements set to not display in a specific break point. You can see it here. I’m not sure what your doing or where your looking?

The menu will display this way in the cornerstone preview as well. But I’m trying to edit pro headers and this is what I see.

Then menu displays fine on the front end, just not in the previewers.

The pro header to look at is
cpd-landing-03-x-support
this is a copy of the assigned header.

but all the headers have this problem.

this is what I see, works fine on the front end, but the preview is not correct.

#6

Hello @Dkime,

I have logged in and edited your “cpd-landing-03-x-support” header and this is what I am seeing:

Please clear your browser’s cache or use private browser mode and test your site again.

#7

Thanks for looking at this,

I don’t get that, only thing I notice in yours is the button style is not showing. What I did notice is at 767 pixels the sites how the different breakpoints live on the front end. I’m not sure if this is part of the problem I’m seeing in the preview.

I get the same thing on multiple sites, different servers, chrome and firefox, after clearing caches, disabling plugins, I’m at a loss.

Here is what I see when I set the browser to 767 px wide, 766 I get the button, 768 I get the inline nav, 767 I get stacks as shown in the picture. Similar to what I see previewing the different break points.

Might be a clue?

So I see it in the headers and pages.

#8

Hey @Dkime,

I get the same view as Ruenel. We had reports though that breakpoints are off in Google Chrome in certain devices. We currently think this is a bug in Chrome in certain device models especially laptops. We would like to gather more info though so would you mind performing the actions below:

If it works in Firefox, please continue using Firefox for now until the bug in Chrome is fixed.

Thanks.

#10

Thanks, this is good news, bad news, preview fixed, collapsed nav menu toggle keeps giving errors.

Good news - I’m on a asus laptop with a ben-q monitor and forgot it switched to 125% recommended view which messed up the preview in the pro header editor. You would think after hundreds of hours in reviewing display problems for site due to personal display and browser settings I would have thought to check. This also fixed the issue when the browser was at 767 px. Tested both in Chrome and FF.

Here is the screenshot

Bad news - I keep getting an error for the collapsed nav menu after I put a new nav in. So I delete the collapsed nav, gets rid of the error, add and edit a new collapsed nav and save, everything displays properly in the preview. I leave the editor. Look at the header list and preview, looks fine, return to the editor, and the message is back.

I added a link to a video in the secure note demonstrating the problem to avoid confusion.

#11

Hey @Dkime,

The issue is really weird. It has to do with the “Why Choose CPD?” menu item. If I move it near the last menu, the error goes away.

I don’t know the cause yet but this could be due to the “?” character and how your database was setup. I’m trying to replicate this in my test site still. For now, please leave the “Why Choose CPD?” menu in the second to the last position.

You could also try removing the ? character.

Thanks.

#12

Great detective work, thank you…

That is weird. I did some more testing, changed replaced menu, tried deleting/recreating CPD page, applying the pro page, removing the “?” in the page title adding it only to the nav label, etc.

So basically, the menu does’t like “?” as you said.
if I put Why Choose Canadian Pro Drivers? that works,
if I put CPD ?, space between the D ? that works.

I tried renaming the header.

Additional experiments:

  1. only happens on the collapsed menu,
  2. " ? " in the inline navigation has no affect._
  3. Position in the menu seems to affect it.
  4. I tried this on another sited, different server - using a sample header, I created a new menu added some pages, added a “?” to the end of the menu label on a couple titles and get the error. I removed the “?” from one title, still a problem, I took the remaining menu item and moved it to the bottom of the menu, error goes away. Seems like the longer titles with the “?” don’t cause the error.

I don’t think it’s a server problem, but that’s only because I tested it on 2 completely different servers. Still could be a common config problem?

But it does seem to be related to the collapsed menu and “?”

Temp fix I guess is, don’t use the “?” in menu labels for collapsed menus in pro header._

Let me know if you are able to reproduce it on your end.

EDIT: UPDATE
For now I change the user role for X Support login to subscriber, I need to move forward on this site. If you need to login to test something. Please email me using email address in the secure note.

To display things like I originally planned with no errors in the pro header preview. I create a second menu for the collapsed nav and removed the “?” in the menu labels. So the inline nave and collapsed nav have separate menus assigned.

Let me know if you if you can reproduce this and find a fix. I’ll post any new finds.

thanks for the help on this!

#13

Hi @Dkime,

Thank you for the detailed post, yes I can replicate this issue, for now try to remove the “?” on the actual page title.

And add only the “?” on the Label

I’ve submitted this to our issue tracker so the developers will be made aware of it.

Cheers!

#14

Thanks, I tried that again but I still get the error. The weird thing is all the different ways it seems to work then not work.

Consistent behavior seems to be

  • The “?” in the menu label or page title and the collapsed nav
  • The error message only appears after you exit the pro header editor the first time you assign the menu with a ? then reopen the editor and you get the error.
  • Changing the menu to something without the ? mark after seeing the error in the editor will remove the error.
  • saving the menu after changing the menu back to a menu without a ? to remove the error; you can exit the editor, open again in the editor with no errors, then add the menu with a ? save, then preview while in the editor with no error. Until you exit the editor and reopen the editor again.

Everything else is random, name changes with the ? sometimes work, sometimes they don’t work depending on the title name, same menu position, has a ?, only changed the name and leave the ?, suddenly it works, change the name still leaving the ?, error, put a space between the title and ?, no error, menu position changes without changing anything, error, then no error depending on where it’s at, etc.

Somebody is going to hurt their brain on this one, mine is a little bruised… :wink:

Keep me posted if there’s a fix.

Thanks…

#15

Hi @Dkime,

Thank you for the additional info; I was able to replicate the issue but the step is very inconsistent one thing is constant though it is caused by the “?” character.

I’ve already submitted a bug report on this, you can check the changelog page on future update release to see if a fix for this bug is included.

Thanks,

#17

Thank you.

#18

You’re always welcome @Dkime.

Cheers!

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.