Sticky TopBar

[vertical-dev]

Hi,
I'm currently using the last version of PrimBlocks for angular and i'm facing an issue with the stackedlayout/Dark TopBar. Is there a way to fix the menu in the top of the page? I've tried to change the CSS (following a couple of posts in this forum ) of the first div and/or to add a new div that contains the main div, but it's not working.
Could you please help me?

Thanks.

[cetincakiroglu]

Hi,

Sorry for the late response, we'll try to replicate the issue and get back to you.

[cetincakiroglu]

Hi,

Try these steps as follows:

1-) Remove flex and flex column classes from the outer wrapper div. (here: <div class="min-h-screen flex flex-column surface-ground">).
2-) Add a wrapper div element with a position sticky right below the outer wrapper. (<div style="position: sticky; top: 0;"></div>).
3-) Wrap your navbar div and ul right below with the div you've added in the second step.
(here: <div class="bg-gray-900 py-3 px-6 shadow-2 flex align-items-center justify-content-between relative lg:static border-bottom-1 border-gray-800" style="min-height: 84px"> )
(and here: <ul class="list-none py-3 px-5 m-0 surface-section flex align-items-center font-medium overflow-x-auto border-top-1 border-bottom-1 surface-border">)

After doing these steps, your navbar should be sticky. Please let us know if anything extra is needed.

Hope it helps.