Streaming live at 10am (PST)

I need the nav bar to begin at the top of the About section (second section) and not at the top of the home header like it is now. How is this done?


#1

I need the nav bar to begin at the top of the About section (second section) and not at the top of the home header like it is now. How is this done?

The nav bar also turns transparent when it scrolls over my blog section. Why is this?

http://independent-first-limited.webflow.com/


#2

Hi @sgreensted I've been checking on your problem using Chrome devtools. It is weird yeah. Can you please share your public link so we can observe your problem easier.


#3

Thanks.

https://webflow.com/design/independent-first-limited?preview=3353c6fdec52954a7919e4e60f40fff3


#4

@sgreensted When you have something with Fixed position you would it need be on top any other content so you should not set your navbar z-index bigger than 0 (zero). It was not it become transparent when blog section come in, it is because its z-index was zero and your blog section is on Relative position which is I think makes its z-index 0 too.


#5

That's great, thank you! Now I just need the nav bar to stay fixed on the about us section. So my hero section would be without the nav bar but when scrolled the nav bar would appear at the top of about us and stay fixed after that exactly like this:

http://demo.rocknrolladesigns.com/html/jarvis/index.html


#6

@sgreensted It used jquery.sticky.js http://stickyjs.com/ Visit that website and you will see short instruction.

To achieve what you want don't set your navbar position as fixed or set it as auto. Your navbar should stay right above about us section. Since you will use jquery.sticky.js to make your navbar sticky on top of the page, you need to give your navbar a unique id, let's say stickynavbar.

Now about how you include this jquery.sticky.js and how to call it. You see the first line inside a red box on the picture. You don't need that. Webflow uses latest jquery.js already. So you will only need all lines that inside yellow box, with few adjustment.

First, you may need to download that jquery.sticky.js file and put somewhere like on your google drive or cdn hosting if you have it and set src to any where you put that file.

Second, replace #sticker with any unique id you gave to your navbar, for ex. #stickynavbar smile

Third, you adjust the topspacing parameter to something fit to your navbar stay exactly on top your page.

It should work. Hope it helps.
Cheers


#7

@sgreensted is this what you were hoping to do > http://tutorials.webflow.com/nav-appears-on-scroll

Basically it keeps your navbar hidden until you scroll into the about section, and then the nav bar appears.
If that is what you were wanting, this is natively possible within webflow following their video tutorial in the link above, no extra code needed smiley


#8

That was perfect, thanks you. Have finally managed it now.


#9

I now have another issue. When the welcome text is clicked on my hero section the site scrolls to the about section but the nav bar doesn't appear. What's the best way to make it appear? Again, thanks for all your help everyone.

http://independent-first-limited.webflow.com/


#10

Glad it helped (I think you were replying to me...)
That is the way it is designed. It will only appear on scroll. If you add a margin of 1 pixel to the top of the "about us section" it will appear, but as you see it will cover content.


#11

Yes it was to you, thank you. I have added a pixel but still the nav bar does not appear.


#12

Haha okay good, I was just making sure I was answering when you wanted me to stuck_out_tongue you bet!
You took away a pixel, you didn't add one - according to the designer you are at -1 for the top margin, it should be just 1.

Change it to reflect what the image shows below and it should work, does for me smiley


#13

Perfect, thank you. All sorted now.


#14

Awesome! You're welcome, glad it's working!


#15

I'm having real trouble linking my "home" tab to my "hero section" can any one see a reason for this?

https://webflow.com/design/independent-first-limited?preview=3353c6fdec52954a7919e4e60f40fff3


#16

Easy fix smiley

Don't use the URL field.

Select your hero section and give it an in-page linking ID of "top" (see from the top left of the screenshot I have selected the hero section, and then looking at the top right of the screenshot you'll see I have entered top in the ID field:


Next,
Select your Home link/tab and click on the LInk to Section tab - link it to the new "top" section you just created:

Aaaand you're done.
Hope that helps smiley


#17

Hi dear Jaidenraleach.

I have the same problem with the navbar. I follow the steps of the Vimeo Videotutorial, but does not work.

https://webflow.com/design/sapiensit?preview=4bb3c3f72d71345574a1324d07ee9cc8

Please, any idea.

Thanks so much for your amazing comments.

Kind regards from Spain and sorry for my bad english


#18

Hey @PedroJ
I can't tell what is going on with what you setup, so I did a video to show you step by step from scratch:
VideoBam.com
Thanks for your kind words & hope it helps - by the way, your english is actually quite good smile


#19

Thanks so much. Worked a treat and very simple.


#20

Thanks a million Super Jaidenraleach, but the video link seems broken. I tried to open it several browsers unsuccessfully.

Please, can you reload it?

Once again, thanks so much from Spain.