Has WB got a tool to do top-nav menu fades like this

[etcbbu]

Hi all,

I've asked about this before, but check out the top-nav menu here:


I don't really care for the two buttons on it that say, "DOWNLOAD FOR WINDOWS!" and "DOWNLOAD FOR MAC!" ; I mainly just like the way it "fades" into a transparency, but then stays anchored to the top of the page, even us the User scrolls down. How can I accomplish this in WB? I've asked about this before, but it's been a couple or few years since.

[BaconFries]

You can achieve this by using the following in WB16. Read from Page Header
https://www.wysiwygwebbuilder.com/forum ... 2&p=447192

Example of a template using this
http://www.wysiwygwebbuilder.com/suppor ... world.html

[etcbbu]

BaconFries

Thanks for the response. So. On a site where I am using a non-published "masterpage" to be a Master Frame for the rest of the *actual* pages of the website, how do I use the "Page Header" object to behave in this "fading" way? Do I place the Page Header object that I want to behave in this "fading" way on the

- non-published "Master page"
- essentially, manually copy/paste this "Page Header" object, on each of the actual rest of the pages of the website (like, index.php , etc. etc.)

?

And secondly, I'm trying to paste it at the top of both the "masterpage", and also then cutting/pasting it onto the top of the "index" page. And, I'll try setting the option "Mode" to "hide on scrollup" and "default", and this Page Header object is never changing, at all. It is doing the exact same thing every time I publish my project and load my page in a browser. When I scroll down, it just scrolls out of site. Like. Completely like a default "Page Header" with no sort of "fade" or "hide/show on scrollup" or anything at all.

[Pablo]

Maybe you did not copy the HTML object (Html1)?
The HTML code controls the affix behavior of the header.

[etcbbu]

I'll gladly include an HTML object. What HTML object am I supposed to do in accordance with the Page Header object? I was just reading the

http://www.wysiwygwebbuilder.com/suppor ... world.html

and

https://www.wysiwygwebbuilder.com/forum ... 2&p=447192
"Page Header"

links; I guess I didn't really try for any HTML Object at all. And incidentally, if you go here viewtopic.php?f=65&t=91354&start=15 you can see a file-download on the same project on which I am trying to perform this Page Header stuff, too, so you can see it there.

[Pablo]

In the template 'snowworld' there is an HTML object. This controls the sticky (affix) behvaior of the header.
So, if you want to use this header to your own project then you will also need to copy the HTML code.

[crispy68]

Hey Travis,

If you don't want to mess with the code yourself, I created a free extension awhile back that does this for you. You can view it here.

[etcbbu]

@crispy

Looks and sounds good, I have downloaded/installed/and am using it. But let me ask:

Is both the extension, itself, and the Layout Grid Object that I'm looking to define as that top-layer that fades need to be on my

- non-published masterpage level page that is going to be called/set on each .php page of the website
- or on my actual index.php page, and individuall installed and maintained on each of the .php pages of my project

?

[crispy68]

If your menu is on a masterpage, then the extension only needs to be on the masterpage with your menu.

[etcbbu]

And does the Extension *NEED* to be a child-object of that top "Layout Grid" object I'm using as my top-fading-menu?

[crispy68]

Yes, the extension needs to be on the same page as the menu.

If you have another menu on another page that doesn't use the masterpage then you would need to add the extension to this page also.

Make sense?

[etcbbu]

Ok, that all makes sense. This top-menu is really going to be "The Menu" that will be the same, and be the top of the page for every page of this website.

So I'm going to have it on the masterpage that's gonna be called on every page of the website.

I'm not seeming to get it to work right, and of course, I know I'm setting something wrong. I'm trying both a Layer set to "Docking" as well as a Layout Grid ; and I'm just not seeming to get it to do anything other than

- define a background
- and it just scrolls away like any random top-menu set of objects always does, without any sort of effect-fade hapening at all.

I *am* changing the "ID of Header" field on the Affix-Object whenever I am trying the 2 different objects, because I know their ID changes depending on what type of object they are. It's just not seeming to do any sort of transition fade. Does it have anything to do with breakpoint sizes or something..?

[etcbbu]

Here's a screenshot that shows some of my settings for both

- The LAyoutGrid object I'm trying to make my top-nav object that will scoll-transition
- the Affix object you created, @crispy

Here's the screenshot:

https://ktravisj.com/scrn1.png

[crispy68]

The ID of the header in the extension is wrong. You have wb_LayoutGrid1 and it should just be LayoutGrid1.

[etcbbu]

I'm trying it with that change, and it's still the same result. I keep editing that on and off, and re-publishing--whether I have that named correctly or not, like, with and without the wb_ in the name, the same effect is happening (nothing).

[crispy68]

It's working for me based on your settings. So it must be something else. Can you email me a copy of your project file and just that page?

[etcbbu]

Here's a weird thing I am noticing--it seems like when I am "clicking", that is causing the color-transition effect to happen. Nothing to do with scrollng. But a click is doing it. Check it out:

https://www.ktravisj.com/thisboz

[crispy68]

If you remove the photo gallery you added does it work then?

[crispy68]

When looking at your code, it doesnt look like you have the header set to 'fixed'. It shows as 'relative' which is why when you scroll you don't see it. It scrolls off the page.

[etcbbu]

sending it to you now; I've taken-out that Gallery and it's still seemingly only operating by click..

[crispy68]

Hey Travis,

The issue is LayoutGrid1 is set to 'floating' and not 'header(fixed)' like in your original image.

[etcbbu]

@crispy,

Thank you for helping me think through it. Here's what I'm finding out - the "Affix" Extension you have made, apparently, butts up against the WB Extension called "Parallax Tiles".

After I fixed the one issue you said:

Code: Select all

The issue is LayoutGrid1 is set to 'floating' and not 'header(fixed)' like in your original image.

I then published and saw everything was working great.

But then when I pasted-back-in the "Parallax Tiles" extension, it then reverted back to only working on click, and really just doesn't do anything whenever you scroll down on the page.

So what does everyone do in situations like this? When Extensions sort of butt-up against each other? Pretty much just gotta choose one or the other?

[crispy68]

Pretty much just gotta choose one or the other?

Sometimes, that is the only choice.

However, there could be a fix. This is the first time that this issue has come up. Can you repost your demo with the Parallax Tiles added again?

Also, check your email.

[etcbbu]

Cool, so, here's what it looks like with Parallax Tiles added-back:

https://www.ktravisj.com/thisbiz/

And responded to your e-mail with two things.