Page 1 of 1
Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 11:45 am
by informer
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)
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 11:51 am
by informer
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
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 12:42 pm
by informer
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 12:48 pm
by Pablo
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.
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 12:50 pm
by informer
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
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 12:56 pm
by informer
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
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 1:00 pm
by Pablo
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.
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 1:03 pm
by informer
Which object to use for adding a carousel inside a page header because it's impossible inside a layout Grid?
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 1:09 pm
by informer
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
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 1:14 pm
by Pablo
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...
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 3:21 pm
by informer
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 ?
Thanks
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 3:45 pm
by Pablo
- Right click for the context menu
- Select 'Margin'
or click the 'Margin' button in the Arrange menu.
The top margin should be the same value as the height of the header.
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 4:46 pm
by informer
If I open the the margin Page header panel, all values = 0.
Something to change?
Re: Floating navigation Page header - Solution
Posted: Tue Jan 16, 2018 4:48 pm
by Pablo
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.