Fixed navigation help needed

Design help General
1

Hi all,

Im after some much needed help with my nav.
I have a nav bar (yellow) and the brand image within a nav section. Im trying to get the yellow nav bar (only)to be fixed on the page when scrolling. I have achieved this, however on larger screens it goes beyond the container, and there for not inline with all the content below it.
Can someone please help with how i can keep it within its parent container?

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

2

Hi @bryan490, I think this is happening because the navbar has a different width limits than the remaining sections. Try to use fixed percentages to set padding/margins fro all sections. I see that you have for example 10% padding on each side for the sections so Maybe make the navbar full width with the same padding. Same with max-width for them. I hope that helps.

3

Hi @_Adry thanks a lot for your reply.

If you navigate to the product page, you will see that all the sections have the same padding and margins, but the problem is still occurring. If you set the break point to 2500px you will see what i mean.

Thanks

4

Hi @bryan490 , I tried to open the project again but the link doesn’t seem to be working. Can you share a new link to the project?

5

Sure, here you go @_Adry

https://preview.webflow.com/preview/alessi-design-group?utm_medium=preview_link&utm_source=designer&utm_content=alessi-design-group&preview=69c8b7973c174c5d37d098abbc31a5ad&workflow=preview

6

Anyone able to help on this?

Thanks a lot

7

I’m in need of some assistance regarding my navigation (nav) bar, and I’d greatly appreciate your help. Currently, I have a yellow nav bar that contains my brand image within a nav section. My objective is to have only the yellow nav bar fixed on the page when scrolling. I managed to achieve this, but I’ve encountered an issue on larger screens where the fixed nav bar extends beyond its parent container, causing it to be misaligned with the content. Regards