Has WB got a tool to do top-nav menu fades like this
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
Has WB got a tool to do top-nav menu fades like this
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.
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.
Last edited by etcbbu on Sun Mar 07, 2021 10:09 pm, edited 2 times in total.
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
- BaconFries
-
- Posts: 5365
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Has WB got a tool to do top-nav menu fades like this
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
https://www.wysiwygwebbuilder.com/forum ... 2&p=447192
Example of a template using this
http://www.wysiwygwebbuilder.com/suppor ... world.html
Re: Has WB got a tool to do top-nav menu fades like this
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.
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.
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
Maybe you did not copy the HTML object (Html1)?
The HTML code controls the affix behavior of the header.
The HTML code controls the affix behavior of the header.
Re: Has WB got a tool to do top-nav menu fades like this
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.
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.
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
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.
So, if you want to use this header to your own project then you will also need to copy the HTML code.
Re: Has WB got a tool to do top-nav menu fades like this
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.
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.
Re: Has WB got a tool to do top-nav menu fades like this
@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
?
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
?
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
If your menu is on a masterpage, then the extension only needs to be on the masterpage with your menu.
Re: Has WB got a tool to do top-nav menu fades like this
And does the Extension *NEED* to be a child-object of that top "Layout Grid" object I'm using as my top-fading-menu?
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
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?
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?
Re: Has WB got a tool to do top-nav menu fades like this
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..?
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..?
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
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
- 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
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
The ID of the header in the extension is wrong. You have wb_LayoutGrid1 and it should just be LayoutGrid1.
Re: Has WB got a tool to do top-nav menu fades like this
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).
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
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?
Re: Has WB got a tool to do top-nav menu fades like this
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
https://www.ktravisj.com/thisboz
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
If you remove the photo gallery you added does it work then?
Re: Has WB got a tool to do top-nav menu fades like this
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.
Re: Has WB got a tool to do top-nav menu fades like this
sending it to you now; I've taken-out that Gallery and it's still seemingly only operating by click..
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
Hey Travis,
The issue is LayoutGrid1 is set to 'floating' and not 'header(fixed)' like in your original image.
The issue is LayoutGrid1 is set to 'floating' and not 'header(fixed)' like in your original image.
Re: Has WB got a tool to do top-nav menu fades like this
@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:
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?
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.
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?
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Re: Has WB got a tool to do top-nav menu fades like this
Sometimes, that is the only choice.Pretty much just gotta choose one or the other?
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.
Re: Has WB got a tool to do top-nav menu fades like this
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.
https://www.ktravisj.com/thisbiz/
And responded to your e-mail with two things.
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com
Travis J Consulting, LLC
⚫️Website Design/Development/Maintenance
⚫️Web-Marketing/Social Media
⚫️SEO/Search Engine Optimization
https://ktravisj.com