Breadcrumb menu became detached from grid, and footer not pinned to the bottom of the page.**help**

[Fredl]

Hi all, the site I'm working on has a few issues when visiting on a phone. (the issues may present themselves on big screens too, I just noticed on my phone.) The site is K9tagalong.com. On every page besides the home page the menu stays where it's supposed to, but on the home page it doesn't respect the grid. How do I pin it back inside the grid? Also the footer displays in the middle of the page blocking content, it only does this on the home page, what did I do wrong there and how to fix it? Thanks!

[jerryco]

IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.

[Pablo]

To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.
Also, please include a description how to reproduce this problem.

I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Note that I cannot see what you have done based on the published page (HTML), because the software has thousands of options and millions of possible combinations.
So, there is no way to know which options you have used by looking at the HTML only.

For further details about how to share a project file, please see this FAQ:
viewtopic.php?f=10&t=82134

[Fredl]

Here it is, sorry I didn't include it on my original post.

https://drive.google.com/drive/folders/ ... sp=sharing

[Pablo]

I have found the following issues:
- the breadcrumb is not inside the layout, it is behind it.
- the page alignment should be set to 'do not center this page'
- Heading1 -> full width should set the to 'true'

Also, note that version 17 no longer supported.

[Fredl]

Hi Pablo, how do I get the breadcrumb back into the grid instead of behind it? I have no idea how I did that. I have tried cutting and pasting it with the grid selected but it doesn't paste it into the grid.
Also why is the footer not at the bottom of the page? Is this a symptom of the unwanted page centering?
Thanks for the other observations, I'll fix those.
I'll buy the latest version of Webbuilder, I appreciate you.

[crispy68]

For the breadcrumb, you simply need to grab it and drag it into the grid. You may need to 'hide' some objects on the workspace to get to it and then drag it off to the side.

[Fredl]

Ok, thanks, I tried that several times but this time when I dragged the breadcrumb off to the side the grid got a blue highlight perimiter and when I placed it it was correctly inside the grid. Thanks so much, working with 19 now!

[Fredl]

For the breadcrumb, you simply need to grab it and drag it into the grid. You may need to 'hide' some objects on the workspace to get to it and then drag it off to the side.

So I removed "center page" setting, the footer still is covering the content on the middle of the page on the homepage. Any idea what is causing that?

[Pablo]

The page footer is set to 'default' which means that it has a fixed position.
For flexible layouts, it should be set to 'floating'

[Fredl]

Thank you very much Pablo!

[Fredl]

I have found the following issues:
- the breadcrumb is not inside the layout, it is behind it.
- the page alignment should be set to 'do not center this page'
- Heading1 -> full width should set the to 'true'

Also, note that version 17 no longer supported.

Ok, I have followed your suggestions but the page is still loading with problems. On phones the footer on the homepage is in the middle of the page instead of where it should be, it's a footer, why is it covering content still? I set the Heading to "Full width = true" but it now doesn't fit on phones, it extends to the right past the viewport. The breadcrumb menu still doesn't stay within the layout grid on small screens and it's difficult to click the links when it is below the orange grid. What can I do to fix these issues? Any tips are appreciated in advance.
Here is a link to the project file:
https://docs.google.com/document/d/1KuZ ... ue&sd=true

[Pablo]

It is still the same issue.

The page footer is set to 'default' which means that it has a fixed position.
For flexible layouts, it should be set to 'floating'

Also, the page alignment should be set to 'do not center this page'

[Fredl]

When I check the footer isn't set to default, it is set to floating now, I have just corrected the page centering and it is better, although none of the text in the footer is visible on small screens. I still have an issue with the breadcrumb not staying within the orange grid on small screens, if you shrink a browser window you'll see what I mean. It not only looks wrong, but the links don't work correctly either. Please let me know what I need to do to fix it, Thanks again Pablo!
Latest project file: https://docs.google.com/document/d/1lqI ... ue&sd=true

[Pablo]

The footer seems to be working now.

If it does not work for you, then you may need to clear your browser cache.

[Fredl]

Yes, the footer was fixed by the "do not center this page" I believe, but the menu is still wonky. If you shrink a browser window enough you'll see what I mean.
here is a screenshot:
https://drive.google.com/file/d/1ySFQ45 ... sp=sharing

[Pablo]

The menu look correct for me.
However, you did set the column height of the layout grid to 'fixed'. I suggest to use 'auto' instead.

[Fredl]

Thanks again Pablo, I switched it to "auto" and published again to the server. It is still wrong on my Pixel, looking like it does in the screenshot I sent. What's odd is that on every other page the menu stays within the grid and the buttons work correctly. Is there a foolproof way to copy the menu from another page onto the home page?

[Pablo]

I think you are making this much more complicated than it needs to be.
Are you sure this is not a browser cache issue?

Is there a foolproof way to copy the menu from another page onto the home page?

Just use copy/paste or a master page

[Fredl]

Entirely possible that I'm needlessly complicating it. I have cleared the cache on my phone, and I've duplicated the results on my wife's iphone. The reason I ask if copy paste of the menu is ok is that I did in fact do it already once while trying to fix another issue with the menu and I was wondering if that may have caused the weird behavior. I just duplicated the problem on my boss's phone, I haven't ever opened it on his before.

[crispy68]

I took a look at your demo. It sort of looks like that with the padding and margin you've added to the breadcrumb that it exceeds the height of the layout grid that you have set to fixed. Also the breadcrumb as it is, is a fixed height. It needs to be floating.

Here are a couple of things to try that I think are better:

1. Set column height in LayoutGrid2 (orange bar with breadcrumb) to auto, set the breadcrumb menu to be full width and set the breadcrumb menu alignment to right.

or

2. Set column height in LayoutGrid2 to auto, set top and bottom padding of the grid to 10 (or whatever you want), set the maximum width of the grid to -970 (use the dash) and remove the top/bottom margin from the breadcrumb menu.

[Fredl]

Thanks a lot Pablo, you found what I had done wrong with the breadcrumb. It's behaving much better now. One thing I don't see in the breadcrumb properties is how to set the height. Where is that set?