Floating navigation Page header - Solution

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
Locked
informer
 
 
Posts: 119
Joined: Tue Nov 19, 2013 5:34 pm

Floating navigation Page header - Solution

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
  1. Drag an drop the first Page header block of the blocks list
    • (Re)name the page header id = PageHeader
    • Set Mode = Floating
  2. Drag & drop a carousel object inside the page header
  3. 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>
  4. 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: 119
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header - Solution

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

informer
 
 
Posts: 119
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header - Solution

Post by informer » Tue Jan 16, 2018 12:42 pm

Test it here

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

Re: Floating navigation Page header - Solution

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: 119
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header - Solution

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: 119
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header - Solution

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

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

Re: Floating navigation Page header - Solution

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: 119
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header - Solution

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: 119
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header - Solution

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.

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

Re: Floating navigation Page header - Solution

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: 119
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header - Solution

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 ?

Thanks

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

Re: Floating navigation Page header - Solution

Post by Pablo » Tue Jan 16, 2018 3:45 pm

- 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.

informer
 
 
Posts: 119
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header - Solution

Post by informer » Tue Jan 16, 2018 4:46 pm

If I open the the margin Page header panel, all values = 0.

Something to change?

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

Re: Floating navigation Page header - Solution

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.

Locked

Who is online

Users browsing this forum: No registered users and 4 guests