why is header showing up at the bottom of page?

All Quick 'n Easy Web Builder support issues that are not covered in the forums below.
Post Reply
jfraze
Posts: 18
Joined: Tue Sep 21, 2021 9:08 pm

why is header showing up at the bottom of page?

Post by jfraze »

OK, I'm stumped again. Every other page is working fine. But on one page with a large flex grid used as an image gallery, I can't get the header to stay at the top of the page.

Technically, it's not a "header" per se. I'm trying to place an embedded page as my header so I can change it globally throughout the site when necessary. An embedded page does not work in an actual Page Header (correct?). Again, using this embedded page is working as I expect on every other page of the site. The "header" is actually a flex grid containing the embedded header page.

On this one page, however, it ends up that I have two flex grids. FlexGrid1 is the item being used as a "header." FlexGrid2 contains everything else. When I place FlexGrid1 at the top of the page hierarchy, it jumps to the bottom of the page. When I place FlexGrid1 at the bottom of the hierarchy, it stays where I want it visually, but then the dropdown menu doesn't work because the dropdown items end up "behind" everything in FlexGrid2, so the user can't click on them.

So... is there any way to move an item to the "Front" of the hierarchy but keep it at the top of a page? Or... is there any way to make it so the user can click "through" FlexGrid2 (seems unlikely) so they can use the dropdown menu? Or... is there any way to add a cell to the TOP of FlexGrid2 so I can drop my header item into that (instead of placing FlexGrid1 into the page at all)?

My best guess is I'm going to have to rebuild the entire page, placing an extra cell at the top of a single Flex Grid to hold my "header" item. Is that my only option?
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: why is header showing up at the bottom of page?

Post by Pablo »

You can rearrange items via the 'Arrange' tools (move back, move forward etc)
jfraze
Posts: 18
Joined: Tue Sep 21, 2021 9:08 pm

Re: why is header showing up at the bottom of page?

Post by jfraze »

Maybe I didn't make myself clear. When I use the "Arrange" tools it moves it geographically exactly the opposite of what I want. I move it "Forward" and it moves the object to the geographical bottom of the page. Yes, it's in the top level, (think of a piece of paper at the top of a stack but at the far south position), so my header ends up down there at the bottom (south end) of the page. I move it to the back (bottom of the stack) and yes, it jumps to the top of the page (far north) positionally, but it's physically behind the other objects (bottom page of the stack), so the drop down menu is inaccessible and I therefore can't use it as a header.

I know I can move it to front of the hierarchy. What I can't figure out is how to move it to the front of the hierarchy and leave it at the top of the page. Every time I move it to the front (with the Arrange tools) it jumps down to the bottom of the page.

I would just add a new row to the FlexGrid and place it in the first row so it's at the top of the page... except adding another row always places the new row at the bottom of the FlexGrid. Which will require me to rename every cell and move every asset in the entire grid. I can do that if necessary. Probably easier to start from scratch though. Is there a way to add an additional row to a FlexGrid and have that new row appear at the top of the grid?
jfraze
Posts: 18
Joined: Tue Sep 21, 2021 9:08 pm

Re: why is header showing up at the bottom of page?

Post by jfraze »

I need to correct myself. The other pages are actually doing the same thing. I just didn't notice because the items at the top of the page (just south of the "header" Flex Grid) are small enough that they weren't effecting every dropdown menu. But they are indeed still in a level that overlaps the dropdown menus (and invalidates the dropdown menus wherever overlap occurs).

I assume I'm building my pages incorrectly.

Is there a way to have a Flex Grid or a flex layer of any kind, containing an embedded page, used as a header bar, so the dropdown menu items will be above everything else in all senses? ie., at the north geographically and the top level? My goal is just to use the embedded page (so I only have to make changes in one file to apply to every page on the site) and to have the header bar float, so it fills the top of the page horizontally in any browser window size. I know that's possible, but I may be thinking it through incorrectly. I'm not seeing a tutorial dealing with this, but maybe I don't know how to search for that?

Sorry for all the questions. Things are actually working pretty well overall but these couple of frustrations with flex items are not in my experience.
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: why is header showing up at the bottom of page?

Post by Pablo »

If you want the content of the page header to overlap the rest of the content then I suggest to use the 'Page Header' object instead.
In that case, you can set the 'stack level' in front of content'.
This functionality is not available for the flexgrid

Or else you can add a z-index manually via Page HTML.

Note: it is difficult to help you, when I cannot see what you have done.
If you need further assistance then please create a DEMO project.
See also this FAQ:
viewtopic.php?f=10&t=45024
jfraze
Posts: 18
Joined: Tue Sep 21, 2021 9:08 pm

Re: why is header showing up at the bottom of page?

Post by jfraze »

I'm not sure how to create a demo project in any reasonable way. You can check the site as it stands (jonfraze.com) to see what I'm trying to do. In it's current state the headers are working. But they don't stretch to fit the browser window. On a small monitor it looks OK but on a larger monitor the header cuts off in an awkward way.

Hence I've been trying to use some sort of a flex item in the header bar, but nothing I do in that vein is working. I posted https://www.jonfraze.com/unnamed2.qwb if that helps, but unless I publish it with all the assets you can't really see from that what's happening. I published a single page to my site so you can see how I want it to appear... except in this case the drop down menus are behind the content and can't be accessed. https://www.jonfraze.com/art/Bliss-NY_B ... rdens.html.

There must be a solution to this but I just can't figure it out.
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: why is header showing up at the bottom of page?

Post by Pablo »

By default, all items are displayed in the order they are on the page, which can be controlled with the arrange tools.
This also means that any objects that are placed after another object will overlap the previous object. Because that is how the browser renders the elements.

As mentioned in my previous reply, you can use a Page Header and set the stack level to 'in front of content' to make it overlap.
In that case, the menu should be placed inside the page header.

Or else you add the z-index manually (via Page HTML)

Code: Select all

<style>
#wb_EmbeddedPage1
{
   z-index: 9999 !important;
}
</style>
However, I strongly recommend to stick with one layout method. Mixing layout grids with flex grid and layers will result in a HTML mess. Please either use layout grids or flex box only.

Note that there are many examples of flexible layouts, so maybe it is helpful to use one of these layouts to get started?
https://quickandeasywebbuilder.com/templates2020.html
jfraze
Posts: 18
Joined: Tue Sep 21, 2021 9:08 pm

Re: why is header showing up at the bottom of page?

Post by jfraze »

Thanks. I don't want to keep bothering you, so if anyone else can chime in that's fine. I'm sure you have lots of more important things to do. I do appreciate the time you've been spending.

Most of the unpublished pages were built using flex grids only, but I still need the header to be an embedded page. The header needs to be the same on every page of the site, and when I make changes to it it needs to change in every page. There may be another way. In Dreamweaver I used to use a master page instead of an embedded page, but I can't find a feature that works that way in this program. The Help file says to use an embedded page. Am I missing something obvious?

I also need the header to be a "flex" item, so the design will adapt to whatever browser window it opens in.

Those are the two main parameters. I need a master page that will be the same in every page on the site. And I need a flex item that will fit any browser. I don't care how I accomplish that. But I need those two things.

A Page Header is a flex item, but I can't use an embedded page in a Page Header. So as far as I can see it can't hold a master page of any sort.

A Flex Grid can use an embedded page, and it's a flex item, but if it's at the top of the page visually it's at the bottom of the stack level so the navigation bar can't be used. If it's at the top of the stack it's visually at the bottom of the page, so it's no longer a "header." (Even within a single flex grid, I'm finding, the cell at the very top is "beneath" the cell below it so the dropdown menu bar still can't be used.)

I'm sure there's a solution to this but I'm not getting any closer yet. Is there any way at all to get a flex item (any flex item) that holds a master page (any kind of master page) with a dropdown menu that sits at the top of the site and the top of stacking hierarchy?
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: why is header showing up at the bottom of page?

Post by Pablo »

The header should be separate from the flex gird.
My suggestion is to use a "page header', so you can set the stack level to 'in front of content'.
Also, I suggest to use a master page (with the page header) instead of an embedded page.
jfraze
Posts: 18
Joined: Tue Sep 21, 2021 9:08 pm

Re: why is header showing up at the bottom of page?

Post by jfraze »

That's exactly what I'm asking for. The "Help" document says to use an embedded page to create a master page (page 164). If there's another and more efficient way to do that, as I had been hoping there would be, please direct me to the instructions on how to accomplish that.

The other stipulation being that what I'm trying to accomplish is to have the header contain a navigation bar that's a flex item, so it properly fits any size browser window. I can find no way of doing that by using a "page header." A page header does not seem to allow any additional flex items, so the navigation bar always seems to have a fixed width. It becomes tiny and unreadable on a smart phone and/or has an ugly cut-off on a large browser window. I know I'm supposed to use a "page header" as the page header but it won't accommodate a flex navigation bar. How do I do both without using flex grids in the master page?
jfraze
Posts: 18
Joined: Tue Sep 21, 2021 9:08 pm

Re: why is header showing up at the bottom of page?

Post by jfraze »

I found a way to do it. It probably results in ugly code but at this point I just don't care. I create a master page file with TWO page headers. Page header 2 overlaps page header 1. Page header 1 is a solid color and contains the menu bar. Page header 2 is 30 pixels smaller vertically, contains everything else, and sits over the top, visually, of page header 1, so page header 1 just appears as a solid bar beneath the Page Header 2 items. It looks right and when I apply that as a Master Page in my other pages, it works. The number 1 rule of coding (as I've been told by people who do this all day) is if it works, don't fix it.

If there's a better or prettier way to accomplish this, I'm open to suggestion. Otherwise I'm sticking with this kludge.
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: why is header showing up at the bottom of page?

Post by Pablo »

You can read more about master pages here:
https://quickandeasywebbuilder.com/master_page.html

Or else you can us the suggested z-index trick to put the menu on top.
Post Reply