Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here... no questions or problems please , this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
informer
Posts: 19 Joined: Tue Nov 19, 2013 5:34 pm
Post
by informer Tue Jan 16, 2018 11:45 am
Hi,
I try to implement a floating navigation panel as in Deeejay Template but with a page header for adding a Carousel objet in the navigation panel because in DeeJay Template the page header is a Layout Grid and there is no way to add a carousel in a Layout Grid.
So find my solution below
Drag an drop the first Page header block of the blocks list
(Re)name the page header id = PageHeader
Set Mode = Floating
Drag & drop a carousel object inside the page header
Drag & drop a HTML object
Select Type = between <head><\head> tag
Add this code in HTLM area Code: Select all
<style>
/* Source DeeJay Template*/
#PageHeader
{
height: 50px;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
transition: all 500ms linear;
z-index: 9999;
}
#PageHeader.affix
{
position: fixed !important;
float: none !important;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
transition: all 500ms linear;
opacity: 0.8;
}
</style>
Drag & drop another HTML object
Select Type = before <\body>
Add this code in HTLM area Code: Select all
<script>
/* Source DeeJay Template*/
$("#PageHeader").affix({offset:{top: $("#PageHeader").offset().top}});
</script>
A great thanks to the DeeJay template developer(s)
informer
Posts: 19 Joined: Tue Nov 19, 2013 5:34 pm
Post
by informer Tue Jan 16, 2018 11:51 am
Just a constraint, I don't sort out how to set up the carousel to be full responsive even if the carousel settings are :
Full width = Full Width
Responsive = Checked
If I position objects (For example CCSmenu) before the carousel inside the page header, only the settings above work!
With Full width = full width/floating Or Full page => the carousel move on the top of the page header in from of all contents
Any help is welcome
Pablo
Posts: 22995 Joined: Sun Mar 28, 2004 12:00 pmLocation: Europe
Contact:
Post
by Pablo Tue Jan 16, 2018 12:48 pm
Just a constraint, I don't sort out how to set up the carousel to be full responsive
The carousel is responsive but the content is not 'flexible'.
You can use breakpoints to adjust the layout of the carousel for different screen sizes.
Note: to move the content below the page header you can use 'margin'.
The purpose of the custom code in the DeeJay template is to change the transparency of the header when scrolled.
In WB12 you can do the same with scroll transitions.
informer
Posts: 19 Joined: Tue Nov 19, 2013 5:34 pm
Post
by informer Tue Jan 16, 2018 12:50 pm
The purpose of the custom code in the DeeJay template is to change the transparency of the header when scrolled.
You're right but the page header is before all contents when the scroll-bar is on the top not in front of next contents
Last edited by
informer on Tue Jan 16, 2018 1:01 pm, edited 1 time in total.
informer
Posts: 19 Joined: Tue Nov 19, 2013 5:34 pm
Post
by informer Tue Jan 16, 2018 12:56 pm
The carousel is responsive but the content is not 'flexible'.
Does it mean that the page header is not responsive? If it's so what is the alternative solution to add a carousel in a floating nav header?
Thanks for your help
Pablo
Posts: 22995 Joined: Sun Mar 28, 2004 12:00 pmLocation: Europe
Contact:
Post
by Pablo Tue Jan 16, 2018 1:00 pm
Not only, the page header stay always on the top of the viewport in front of all contents when we move the scroll-bar
Correct, because that is what affixed does. But it is not needed when you use 'fixed'.
Does it mean that the page header is not responsive?
The page header is also responsive, but not flexible just like the Carousel.
If you need flexible header then you can use a layout grid.
informer
Posts: 19 Joined: Tue Nov 19, 2013 5:34 pm
Post
by informer Tue Jan 16, 2018 1:03 pm
Which object to use for adding a carousel inside a page header because it's impossible inside a layout Grid?
informer
Posts: 19 Joined: Tue Nov 19, 2013 5:34 pm
Post
by informer Tue Jan 16, 2018 1:09 pm
Correct, because that is what affixed does. But it is not needed when you use 'fixed'.
If I set FIXED mode, when the scroll bar is on top, the page header stays in front of all contents
Last edited by
informer on Tue Jan 16, 2018 3:24 pm, edited 2 times in total.
Pablo
Posts: 22995 Joined: Sun Mar 28, 2004 12:00 pmLocation: Europe
Contact:
Post
by Pablo Tue Jan 16, 2018 1:14 pm
A Carousel cannot be inside a page header (or other layer), because a Carousel is a (multi-layer) container itself.
If I set FIXED mode then, the scroll bar is on top, the page header stays in front of all content
That is why I suggested to use margin...
informer
Posts: 19 Joined: Tue Nov 19, 2013 5:34 pm
Post
by informer Tue Jan 16, 2018 3:21 pm
Could you give me a link to a tutorial / topic about Margin, please because I see anything about margin settings in page header or carousel panels ?
Pablo
Posts: 22995 Joined: Sun Mar 28, 2004 12:00 pmLocation: Europe
Contact:
Post
by Pablo Tue Jan 16, 2018 3:45 pm
- Right click for the context menu
informer
Posts: 19 Joined: Tue Nov 19, 2013 5:34 pm
Post
by informer Tue Jan 16, 2018 4:46 pm
If I open the the margin Page header panel, all values = 0.
Pablo
Posts: 22995 Joined: Sun Mar 28, 2004 12:00 pmLocation: Europe
Contact:
Post
by Pablo Tue Jan 16, 2018 4:48 pm
I was not referring to the margin of the page header.
If you need an offset then you can set a margin for the first item after the header.
