Fixed Header (Template #6 )
Forum rules
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
IMPORTANT NOTE!!
DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Fixed Header (Template #6 )
A very modern and attractive header i found in template 6 on this link
http://www.wysiwygwebbuilder.com/suppor ... asic6.html
And while i'm trying to figure out how this header works, i have found a custom code on the page. unfortunately this code does't work with me when i copied this code and past in a demo page with a break points. however it works good with layout grid!! Am i missing something!! And is there another way to achieve same effect like event or something in the layer options!!
What i exactly need to do is a fixed layer in any where on a page. and the same header works as a docking top when this layer become in the header of a screen while scrolling down the page. that's exactly what you'll see in template 6.
Many Thanks..
http://www.wysiwygwebbuilder.com/suppor ... asic6.html
And while i'm trying to figure out how this header works, i have found a custom code on the page. unfortunately this code does't work with me when i copied this code and past in a demo page with a break points. however it works good with layout grid!! Am i missing something!! And is there another way to achieve same effect like event or something in the layer options!!
What i exactly need to do is a fixed layer in any where on a page. and the same header works as a docking top when this layer become in the header of a screen while scrolling down the page. that's exactly what you'll see in template 6.
Many Thanks..
- Bluesman
-
- Posts: 1207
- Joined: Mon Feb 01, 2016 5:43 pm
- Location: Sweden
- Contact:
Re: Fixed Header (Template #6 )
This is one way:Williams wrote: Fri Jan 04, 2019 11:48 pm A very modern and attractive header i found in template 6 on this link
http://www.wysiwygwebbuilder.com/suppor ... asic6.html
And while i'm trying to figure out how this header works, i have found a custom code on the page. unfortunately this code does't work with me when i copied this code and past in a demo page with a break points. however it works good with layout grid!! Am i missing something!! And is there another way to achieve same effect like event or something in the layer options!!
What i exactly need to do is a fixed layer in any where on a page. and the same header works as a docking top when this layer become in the header of a screen while scrolling down the page. that's exactly what you'll see in template 6.
Many Thanks..
https://www.youtube.com/watch?v=LPv7jAA ... iQ&index=9
Or this extension maybe: http://www.magnawebstudio.com/demo/reve ... /main.html
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
If the code does not work then the ID of the objects and the script probably do not match.
In the template the ID of the layout grid is 'navigation'. If your object has a different ID then you will need to modify the code.
In the template the ID of the layout grid is 'navigation'. If your object has a different ID then you will need to modify the code.
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
Thank you Blueman for your help. but actually that's not what i'm asking about..
Pablo. i already did that but it doesn't work for me. pls take a look
https://demo1.getsitesolutions.com/template6.rar
Many thanks
Pablo. i already did that but it doesn't work for me. pls take a look
https://demo1.getsitesolutions.com/template6.rar
Many thanks
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
Can you please share the file in standard zip format?
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
I'm sorry, my computer does not support RAR.
Can you please share the file in standard ZIP format?
Can you please share the file in standard ZIP format?
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
There are a few issues why this does not work.
- #wb_Layer2 should be #Layer2
- jQuery is not included -> add $JQUERY$ to the resources of the HTML object or include an object that uses jQuery.
- affix.js should be affix.min.js (in resources)
- The layer is not floating so affix does not work because the layer has an absolute position.
- #wb_Layer2 should be #Layer2
- jQuery is not included -> add $JQUERY$ to the resources of the HTML object or include an object that uses jQuery.
- affix.js should be affix.min.js (in resources)
- The layer is not floating so affix does not work because the layer has an absolute position.
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
Thank Pablo for your reply,
What do you exactly mean with " jQuery is not included -> add $JQUERY$ to the resources of the HTML object or include an object that uses jQuery.
And how to change the layer to be floating!
Thank you again..
What do you exactly mean with " jQuery is not included -> add $JQUERY$ to the resources of the HTML object or include an object that uses jQuery.
And how to change the layer to be floating!
Thank you again..
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
The HTML code (affix) requires jQuery. On your page there are no objects that use jQuery so you will need to add it yourself.
You can set the layer mode to 'floating layer' the properties of the layer.
You can set the layer mode to 'floating layer' the properties of the layer.
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
From where i can change the affix.js file to be affix.min.js!! Do you mean the Html Code!Pablo wrote: Thu Jan 10, 2019 7:33 am There are a few issues why this does not work.
- #wb_Layer2 should be #Layer2
- jQuery is not included -> add $JQUERY$ to the resources of the HTML object or include an object that uses jQuery.
- affix.js should be affix.min.js (in resources)
- The layer is not floating so affix does not work because the layer has an absolute position.
And can i add any item under Jquery UI / Bootstrap!
Thanks again..
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
Either add an object that uses jQuery or add
$JQUERY$
to the resources list in the HTML object (above affix.min.js)
$JQUERY$
to the resources list in the HTML object (above affix.min.js)
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
- Psycho
-
- Posts: 16
- Joined: Wed Oct 18, 2017 1:24 pm
Re: Fixed Header (Template #6 )
Have you tried setting the bottom layer via Object Properties/General and making the mode a Sticky Layer and the Delay set to 0
I have enough money to last me the rest of my life - Providing I die by next Tuesday
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
1.
'JQUERY' should be '$JQUERY$'
2.
should be
3.
The layers are not set to floating.
'JQUERY' should be '$JQUERY$'
2.
Code: Select all
$("#Layer2").affix({offset:{top: $("Layer2").offset().top}});
Code: Select all
$("#Layer2").affix({offset:{top: $("#Layer2").offset().top}});
The layers are not set to floating.
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
yes, but that's not what we're playing around..
pls check http://www.wysiwygwebbuilder.com/suppor ... asic6.html to get exactly what i need to do.
Thank you Psycho for your help..
pls check http://www.wysiwygwebbuilder.com/suppor ... asic6.html to get exactly what i need to do.
Thank you Psycho for your help..
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
Excellent Pablo,Pablo wrote: Fri Jan 11, 2019 10:29 am 1.
'JQUERY' should be '$JQUERY$'
2.should beCode: Select all
$("#Layer2").affix({offset:{top: $("Layer2").offset().top}});
3.Code: Select all
$("#Layer2").affix({offset:{top: $("#Layer2").offset().top}});
The layers are not set to floating.
It works that way. but there is a blank space in the header of the page. it looks like the same size of layer1.
so how we can fix this!
http://demo1.getsitesolutions.com/demo2.zip
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
Please set all layers to floating...
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
Aha got you. you mean the layer mode under location and size not the position children.
yes yes it works perfect now. Thank you very much Pablo..
Here's the final demo project for those who are interested about this trick..
http://demo1.getsitesolutions.com/demo3.zip
yes yes it works perfect now. Thank you very much Pablo..
Here's the final demo project for those who are interested about this trick..

http://demo1.getsitesolutions.com/demo3.zip
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
Pable,
It doesn't work for me using a master page!
Am i missing for something or this is a bug!
http://demo1.getsitesolutions.com/project1.rar
It doesn't work for me using a master page!
Am i missing for something or this is a bug!
http://demo1.getsitesolutions.com/project1.rar
- BaconFries
-
- Posts: 5976
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Fixed Header (Template #6 )
Link url invalid but I have rectified this. Note probably best to make it a zip rather than rar.
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
Please use standard zip format.
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
Thanks guys for the quick response.
here is the file again
Demo1.getsitesolutions.com/project1.zip
here is the file again
Demo1.getsitesolutions.com/project1.zip
Last edited by Williams on Fri Feb 15, 2019 1:18 pm, edited 2 times in total.
- BaconFries
-
- Posts: 5976
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Fixed Header (Template #6 )
Please always provide the full url including the https:// or http://
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
please copy and past the file into your browser..
it works fine with me
http://demo1.getsitesolutions.com/project1.zip
it works fine with me
http://demo1.getsitesolutions.com/project1.zip
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
Your example works.
However, the layer with the image (Layer3) is on top of the affixed layer.
So, you will need to add a z-index to the affixed layer.
Also, if you are using floating layers then the content place holder should also be floating.
However, the layer with the image (Layer3) is on top of the affixed layer.
So, you will need to add a z-index to the affixed layer.
Also, if you are using floating layers then the content place holder should also be floating.
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
Could you clarify more pls what you exactly mean with
it works fine in the master page. but doesn't work in the homepage!!
i have changed the content place holder to be floating, and the image of index as well. however the same result still existsSo, you will need to add a z-index to the affixed layer.
it works fine in the master page. but doesn't work in the homepage!!
- Pablo
- Posts: 23616
- Joined: Sun Mar 28, 2004 12:00 pm
- Location: Europe
- Contact:
Re: Fixed Header (Template #6 )
It does work. However, the affixed layer is behind the image!it works fine in the master page. but doesn't work in the homepage!!
For example:Could you clarify more pls what you exactly mean with
Code: Select all
#Layer2.affix
{
z-index: 9990 !important;
}
- Williams
-
- Posts: 102
- Joined: Fri Nov 23, 2018 12:22 am
- Contact:
Re: Fixed Header (Template #6 )
Thank you pablo for your kind support..
maybe that's strange!! but that's what happened and it works fine for now... i have changed content place holder to expand overflow and and set the layer2 to front.. That's all
Here's the project if anyone is interested..
Demo1.getsitesolutions.com/home.zip
Pls let me know if you have any comments.. and thank you again for your efforts..
maybe that's strange!! but that's what happened and it works fine for now... i have changed content place holder to expand overflow and and set the layer2 to front.. That's all

Here's the project if anyone is interested..
Demo1.getsitesolutions.com/home.zip
Pls let me know if you have any comments.. and thank you again for your efforts..