Hi Guys,
https://webflow.com/website/navbarhelp
I need help with 2 small fixes please:
When the page loads and I click on the nav bar link and goes to that section, the new nav bar (black) should drop/show-up as well.
The spacing every time the new nav bar (black) drops is off now. It should drop/show-up before any of the website sections, so it won’t block its title or content.
Hopefully it makes sense, but let me know if you need further clarification.
Thanks so much!
Hey @eze81,
I just can help you a tiny bit because:
Whenever I try to implement an interaction like “scroll → set new header/navbar to be shown” it wont stop before the section.
But if you have a navbar that is already visible, it will stop before that.
Be aware that you need to apply “width: 100%” for your navbars as well.
Daniel
p.s. you can easily test it out if you remove your black navbar, set the other one to be “position: fixed” and “width: 100%” and click the link. It will then stop before the product section.
Hey @eze81 just had a look and i think there is an easier and more semantic way of doing this… will create an example project for you and send you the link. One question… will both Navbars have exactly the same links/brand logo?
@eze81 just realised Webflow has some pretty cool tutorials if you havent seen this (I’m sure you have) but check this out… it might actually solve your problem and give you a pretty cool technique 
yes I saw it, haha, thanks! but still my issue is not covered in the video 
Yes, all the same components, but different colors.
The first one is transparent, the second one is black.
Thanks!!!
I added the 100% width, but the look of the nav bar is still the same. Was it supposed to change with that full width? or it is just the propert way to do it?
As far as your explanation, yes, If I remove the black one, then it works… but I do need the black nav bar… as it drops when scrolling and looks really nice (I think).
Thanks
All I know is that the static bar needs both attributes (width and height) in order to stop right before a section that you navigate to.
But it still doesnt fix the issue when you display the bar itself later (through some interaction) … sorry
Ok I got you now! I have run into a similar problem before…
To fix problem 1)…
You need to add either a slight offset to the interaction (see below - Scroll Out of view offset 10%) because the browser still thinks the Hero section is visible when you click your anchor link Or you need to add bottom margin spacing to the Hero element. I think the offset is an easier method.
To fix Problem 2)…
There are two ways of doing this. You need to give your “products” section enough top padding to account for the fixed navbar.
The other way is to create a blank “div” element and give it the ID Products. Place it above your current products section. Then make the top margin negative. something like “-150px” and test to see the spacing is to your requirements.
Both solutions are just provding you with a way to offset the fixed navbar. Let me know if you need anymore help!
Yeah I personally like the second version of tim a bit more.
Create a div with a class like “anchor”, delete the id from the section and give it to this div, set its position to be float: left, width: 100px; height: 1px and margin-top: -80px (since your navbar is 80px in height).
Works like a charm.
The “no show” interaction is actually fine, its just an intial hidden state that gets overriden via interactions on the Hero section triggered by scrolling. Same sort of technique as the webflow tutorial i sent earlier.
Wupsidaisy, my mistake - never mind 
Hi @tim,
Thank you so much for your help!
I now have a much better idea on what to do. Will try it on my real site and I’ll show you the end result.
Thanks again!
Eze
we are all learning here thanks dude for your input as well !!!
Your more than welcome! Look forward to seeing how you get on!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
