Streaming live at 10am (PST)

Responsive NavBar - best way to fix it?

Hello,

I’ve got a problem with my NavBar on mobile. Please see my read-only link.

What’s the best way to fix it ?
How can I make the size of the Navigation Block Right Scalable ? Any other commendations ?

Thanks a lot !


Here is my site Read-Only: LINK

Hi @tvog,

I hope you are doing well, I think flexbox is a good way to go. I made a video, it is a long one as I was basically checking the existing styles while showing how to update those, so pardon the live aspect of the video:

I hope this helps, a good place to explore more about Flexbox is at https://flexbox.webflow.com.

Thanks so much for the video !
One last question. Because my nav is not fixed and the bg transparent, when I scroll the content is visible under the navbar. How can I change that ? Should I change the nav to absolute ?

Hi @tvog, I am not seeing the behavior, is this happenig on the home page? Could you help to include a Screenshot or screencast that helps to give a visual description. Here are some good tools: Loom, Cloudapp?

Thanks in advance

Yes, of course. Here it is : Loom | Free Screen & Video Recording Software

Hi @tvog, I am still not seeing the behavior in the designer, I see the navbar set to absolute and then the navbar scrolls with the page.

Do you want the navbar fixed with content underneath ?

Yes, I setted the navbar to absolute, but you told me to set it to fixed in the video.

Is my navbar nicely integrated right now ? I changed it to absolute by my own.

Ok, so just to be certain, you want the navbar to be fixed and have pages scroll underneath the navbar?

If so, then you will need to set the navbar to fixed and give the navbar a higher z-index than other elements on the page.

If you want the navbar to be scrolled with the page and section and not be visible when the user scrolls the page, then you would keep the navbar to absolute or relative position.

If you set the navbar to fixed, then give the navbar a z-index of say 999 so that the navbar goes over other content on the page.