I am wanting to create a top nav bar like the one at Texas A&M.
I want our logo in the center and I like how it scales down on scroll but I do not want the top search area above the main nav bar to disappear on scroll.
Any ideas on how to achieve this?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @icanCreate, have you started setting this up in a project already? If so, are you able to share a read-only link? Or are you asking for the basic idea around creating something like the example?
I have not started it yet because I am still learning.
I know that the nav bar will have a position of Sticky but that is all I know so far.
I understand. If you would like the nav bar and the search area above to stay visible at all times, you will have to wrap both containers with a parent element and add
position: sticky; to that. It’s pretty straight forward.
If you need help or guidance with anything in the future, feel free to reach out. I’m happy to help.
No, that doesn’t matter. You are free to use them as children of any parent element.