Top Nav Bar Design

Design help General
1

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?

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

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?

3

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.

Thanks!

1 Like
4

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.

5

My top nav bar and main nav bar are both symbols, does that matter?

Here is the read-only link.

https://preview.webflow.com/preview/midway-isd?utm_medium=preview_link&utm_source=designer&utm_content=midway-isd&preview=9936d58a459690c85f44e9d00f60c9af&workflow=preview

Thanks

1 Like
6

No, that doesn’t matter. You are free to use them as children of any parent element.

1 Like