Header that stays on top

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Joysurrender
 
 
Posts: 14
Joined: Mon Oct 31, 2016 7:29 pm

Header that stays on top

Post by Joysurrender » Mon Oct 31, 2016 11:41 pm

Hi there.
I don't know if this is the right section but I have a question for you all.
I'm new at this software and I was wondering about how can I have an header that always stay on the top of the page, even when I scroll down until the footer.
I already did it but there was a major problem: using the Header item will make a wrong spacing between the header itself and the Layout grid after it, depending on the resolution of the display (like there's a space between the two elements, showing the background... or like, with lower resolutions, the second element (the layout grid) ends up to be hidden behind the header item).
I don't need to use Breakpoints because it would be the same, anyway.
I solved the "spacing" issue by using a layout grid as header on the master_page.php followed by the Content Place Holder, but of course my "header" now doesn't stay on top, under the URL inside the browser: it disappears going up with the full page.
How can I solve it? How can I have my layout grid staying there and covering the site that scrolls down?

User avatar
Pablo
 
Posts: 18407
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Header that stays on top

Post by Pablo » Tue Nov 01, 2016 7:05 am

You will need to add a dummy/place holder object at the top of the page with the same height as the header. Or use top margin on the first grid.
If you need different spacing for different screen sizes then you will need to implement breakpoints and resize the dummy/place holder object.

Here are a few other ideas:
http://wysiwygwebbuilder.com/support/wb ... gency.html
http://wysiwygwebbuilder.com/support/wb ... eejay.html
http://wysiwygwebbuilder.com/support/wb ... folio.html
http://wysiwygwebbuilder.com/support/wb ... rgrid.html

Joysurrender
 
 
Posts: 14
Joined: Mon Oct 31, 2016 7:29 pm

Re: Header that stays on top

Post by Joysurrender » Tue Nov 01, 2016 12:55 pm

Thank you for your answer but I didn't get the point.
What if I want any other element being fixed in one position even if the page is scrolling down or up?
I can't find anything like "dummy" or "place holder" a part the Content Place Holder, that doesn't have an option to fix itself somewhere in the window.
Using top margin onn the first grid will just make a space between the page start and the iframe.

This is an example file to show you how I'm working:
http://www.filedropper.com/test-joysurrender

User avatar
Pablo
 
Posts: 18407
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Header that stays on top

Post by Pablo » Tue Nov 01, 2016 3:04 pm

By 'dummy' or 'place holder', I mean any floating object that pushes the content down. Like a layer or page header.

You are current using a layout grid, this cannot be fixed because it is always floating. I suggest to replace it with a page header.

Joysurrender
 
 
Posts: 14
Joined: Mon Oct 31, 2016 7:29 pm

Re: Header that stays on top

Post by Joysurrender » Tue Nov 08, 2016 3:07 pm

Yeah but the page header has white spacing between itself and the layout grid coming next (content of the page) because the content goes below the header, so in order to avoid that I need to set an offset of a certain number of pixels, meaning that on different Window shape it ends by covering or "avoiding, getting distances" from the main content.

User avatar
Pablo
 
Posts: 18407
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Header that stays on top

Post by Pablo » Tue Nov 08, 2016 3:13 pm

Yeah but the page header has white spacing between itself and the layout grid coming next
What exactly do you mean by that? Do you have an example? Maybe you are using it wrong?

Did you look at the example templates?

Joysurrender
 
 
Posts: 14
Joined: Mon Oct 31, 2016 7:29 pm

Re: Header that stays on top

Post by Joysurrender » Wed Nov 09, 2016 6:34 pm

Yes, I did, but still can't find how to do that.
Here's an example of what I'm working on:
http://www.pc-teck.it/ftp/files/sito%20 ... 0Copia.rar

I need the "header" going down, it stays on top...

User avatar
Pablo
 
Posts: 18407
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Header that stays on top

Post by Pablo » Wed Nov 09, 2016 6:42 pm

Yes, I did, but still can't find how to do that.
Did you download the templates and check out the settings? I think that is the best way to learn how to implement this functionality.

I do not see page header in your project. If you want a fixed header then you will need to use a page header. A layout grid cannot be fixed.

Joysurrender
 
 
Posts: 14
Joined: Mon Oct 31, 2016 7:29 pm

Re: Header that stays on top

Post by Joysurrender » Fri Nov 11, 2016 7:56 pm

I know but you see, when I use an header, everything else goes BEHIND the header, not below.
To get them below I need to use a top padding of the same amount of pixels the header is high, but since it's responsive, the high is not always the same, ending up with covering the other elements or, if getting shorter, letting the space of the "top padding" too much tall.
I can't examine that in those examples... please help :(

User avatar
BaconFries
 
 
Posts: 4701
Joined: Thu Aug 16, 2007 7:32 pm

Re: Header that stays on top

Post by BaconFries » Fri Nov 11, 2016 8:13 pm

OK this is how it works. When you use a layer (header) and it is set to horizontal sizing then it is then moved outside the body container so the image or anything ontop will then show as behind the layer.
So if you wish the layer( header) to be behind the content ie the image etc then you should set it to 'header/footer' mode.

User avatar
Pablo
 
Posts: 18407
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Header that stays on top

Post by Pablo » Fri Nov 11, 2016 9:50 pm

Normally you would use margin to create an offset so the content will not go behind the header.
You cannot have a different margin in breakpoints so the header needs the same height.

Joysurrender
 
 
Posts: 14
Joined: Mon Oct 31, 2016 7:29 pm

Re: Header that stays on top

Post by Joysurrender » Sun Nov 13, 2016 2:17 pm

You cannot have a different margin in breakpoints so the header needs the same height.
That's the point... that bad :(
I'll figure something out...

EDIT:

Here I am again!
Well, I'm back using the Header item for my header.
This is how my site is looking right now, so I'm back to my first issue:
Main page on a 1080p dispay:
Image
As you may see, now the header goes down as the user scrolls down, BUT the first two images (Prodotti Chimici and the other one) are half covered by the header itself. They are actually a layout grid, but still if I offset the layout grid to the same heigh of the header, I'll receive this effect (in this case obteined by resizing the browser window but generally becoming truth on different reslutions):
Image
You can ofcourse see the white space running between the main menu and the first two images (still half-or more cropped).
What is that?! I'm uploading my file...
Here's the file: http://www.pc-teck.it/ftp/files/sito%20 ... 0Copia.rar
Please feel free to edit it and re-upload, so I can understand

User avatar
Pablo
 
Posts: 18407
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Header that stays on top

Post by Pablo » Thu Nov 17, 2016 7:27 am

I have downloaded your project again but I do not see any changes.
It is the same project as a few weeks ago.

Can you please upload the current version so I can see what you have done?

Joysurrender
 
 
Posts: 14
Joined: Mon Oct 31, 2016 7:29 pm

Re: Header that stays on top

Post by Joysurrender » Thu Nov 17, 2016 10:52 pm

Oh that's strange.
I reuploaded it using another host and remaking the zip.
http://www.theark.altervista.org/per_pablo.zip

Please retry.
The differences should be:
-the logo is bigger
-the header is fixed on top (and the first two images then are BELOW the header, meaning: the issue I have to solve)
-The 3 symbols are moved on the footer (and not on the right of the logo as before)

User avatar
Pablo
 
Posts: 18407
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Header that stays on top

Post by Pablo » Fri Nov 18, 2016 7:39 am

The layout grids of your master frame are inside the page header. This is not correct. Layout grids either must be a child element of the page (body) or another layout grid.

Please remove 'LayoutGrid_banner' and 'LayoutGrid3_menu'
and make the image and tabmenu a direct child element of the page header

You also need to add a place holder to the content page to make sure the content does not go behind the page header. I usually use a floating layer for this.
Example:
http://wysiwygwebbuilder.com/support/jo ... index.html

but you can also use a margin on the first grid. See the demo project in this tutorial:
http://www.wysiwygwebbuilder.com/master_frame.html

Post Reply