Amount of text effecting nav bar spacing/layout glitch?

Having an issue with page layout -

After some trial and error it seems there is a problem with adding text to the page, which makes the top nav bar and other components act strangely…

The nav bar is a symbol, so should be the same on every page, however on the “Home” or “About” page it’s not displaying correctly but the “what’s on” page and “contact us” page it’s working fine…

It seems that when a certain length of text is added to the page, it starts to glitch the rest of the design.

  • “About” page, has the longer paragraph of text (and doesn’t display correctly)
  • “About2” has reduced text (and works fine)

I’m at a loss…
Thanks in advance!

read only link is:
https://preview.webflow.com/preview/maaa?utm_medium=preview_link&utm_source=designer&utm_content=maaa&preview=1c591f1b5f205ff4d52c4446cb896590&pageId=5d3720e98825e01c6266efd1&mode=preview

Please add some screenshots of the problem ("glitch " = very general) ==> hard to understand like this.

Hi,

Thanks for getting back to me, absolutely, please see below:

(Top image)
Home page is incorrect as in it isn’t at the top, and has extra spacing…

(Lower image)
What’s on page is correct

I don’t understand how the amount of text would effect a symbol…?

If you look at “about” page, this is incorrect too, however if you go to:

https://maaa.webflow.io/about2

I have reduced the amount of text (nothing else changed) and the layout is correct.

Q1

Where? Main navbar? (Text of…?)

Q2. You use custom code somewhere?

This page is ok:
https://maaa.webflow.io/about2

And this is not?
https://maaa.webflow.io/about

Hard to understand.

issue

under about2 you get weird text (chrome)

Sorry, in the main body of text on the “about” page for example:

“A general committee, on which various forms of the arts are represented, is elected annually to…”

If the full amount of text is there, then it has the strange effect on nav bar etc.

If I delete about 2/3rds of the text from the main paragraph of text, the nav bar displays as it should.

Againnnnnnnnnnnnnnnnnnnnn - no way to answer.

What the diff between about to about2 - and which one works fine for you.
Maybe create a video record (Log into Loom | Loom).

How to:
Create the bug (Use a lot of text or any idea like this) - then share the URL with the bug/problem (No way to help you by story - only by example/live url)

If you use dev tools and inspect the pages you will see all these quotations inserted. Do you have a reason for these/ did yo put these in? Are you running a different script on the different pages?

Hi thanks for answering,

No, I’ve not added these quotations, that’s really strange. But seems to be the cause of problem…

Any idea why it would be only effecting larger amounts of text like on “about” and not “about2”?

Ok, here is a video on Dropbox, to try and explain the situation -

video

The best idea in this kind of very weird bugs is to create new empty page - and copy-paste one by one - the elements → publish and test (Until you find the buggy element).

Maybe you put somewhere custom code and missing closing brace } or />.

The l sep create this weird spaces (Under safari this is hidden - but not in chrome).

Maybe your text with some hidden/buggy character (Paste as plain text). or try lorem-ipsum first.

Yes, I tried that, that’s how I found out it was related to the text section/paragraph.

I’ve tried copy and pasting from a new text document into the affected pages but the same thing happens.

I’m wondering if it is to do with page height some how…!? But I’ve looked at all the elements and can’t find a solution that way either.

The weird thing is, it was all working fine about a month ago, then when I come back to it in the last few days, this bug has appeared… Has to be a bug within Webflow surely?

Webflow bug - maybe - but this is happen only to you and only on specific page.
Most of the times this weird bugs happens beacuse you missing closing brace -

Example (Missing closing quotes for name)

<meta content="summary" name="twitter:card />

Are you sure your project is with zero custom code? (Also check under project setting → code)

Try before body for about to copy-paste this code - publish and test

<script>
$(document).ready(function () {
  $("body").children().each(function() {
      document.body.innerHTML = document.body.innerHTML.replace(/\u2028/g, ' ');
  });
})
</script>
1 Like

No custom code, in page settings or site settings.

It’s quite a straight forward site for a client.

Ok I’ll try this, thanks.

Also write to webflow support. Sorry no way to help you more than that her.

Hi, yes that seems to work fine!

I’m not a coder, what does this do?

Thanks for all your help and assistance so far, most appreciated!

I’ll contact webflow support as well.

The code:
replace all weird l sep with empty '' text.

Better to solve this because on view source you find this letters.

Haha, ok, fair enough. :partying_face:

Thanks :+1:

Absolutely, it’s not clean, and shouldn’t be there in the first place. Pretty simple what I’m trying to do, adding text!?

Once again, thanks for your help.

There were a bunch of scripts being added to that page and I thought I took a screenshot of that but I guess I didn’t. Personally I would remake the page and see. Good luck.

2 Likes