How do I get one strip in my header to stick while shrinking the other?

Ask the community
,
1

Hello! I created a website for my client and in her header I have two strips. The top one has a logo, and contact info, the lower has the nav menu.

I would like the strip with the nav menu to stick, but the top one to disappear on the scroll. Currently, I have both strips fixed on the scroll.

I will need some custom coding I believe to accomplish this. Are there any solutions?

2560×1600 657 KB

2

Yes you will need some custom coding, exactly!

  1. You will need either to create a code on your MASTER-PAGE (header section) which will recognice on which page exactly you want to disappear one of your header elements and which one.

  2. Or you create a public js-file where you can do the same, by injecting the code from public-js-file.

Nope! I think it should be → (2) ← the public JS-File!

3

Thank you for the response. Is there a forum post or tutorial you may know of that I could follow? I have not done any custom coding on Wix before so quite green about it.

4

@contact40151
Already have done some coding? If not, perhaps it is not the right starting point for beginner. More advanced skills are required in this case.

  1. Activate the DEV-MODE in your Wix-Editor.
  2. Navigate on the left-side-panel to —>


3) Create a PUBLIC-JS-FILE (give it an plausible name) → for example —>
----> “Public-Controls”, or “Public-JS”, or "Public-Functions, or just “Controls”, or whatever.

  1. Create/define a function on the new created Public-JS —> for example:
export function myFirstPublicFunction(){
    //write down here your code --> what shall happen ???
}
  1. Import the new created function to your page…
import { myFirstPublicFunction } from 'backend/Public-Controls.JS' //<-- name of the JS-file
  1. Calling the new public function right from your page…
$w().onReady(()=>{
    $w('#myButtonIDhere').onClick(()=>{
	myFirstPublicFunction(); //This should start the public function on PUBLIC-JS.
    });
}

Conclusion: Now you are able to handle your public-function directly from your page.

In your case, you will have to place the non-public-part same way on the MASTER-PAGE-JS instead of the normal site-page.

Or you simply import it to both pages —> site-page & master-page.

Then you can code your function on the public-js-file.

5

An similar working example you can find here …
https://www.media-junkie.com/wix-tutorials

Take a look at the pic, to see how is defined the header.

  1. Click on Overview → see what happens.
  2. Click on Link-List —> see what happens.
6

hey @contact40151 have you found a solution cause I have your exact same problem.

regards

Francesco