Top Nav Bar Design

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)

1 Like

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.


1 Like

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.

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

Here is the read-only link.


1 Like

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