Header and footer height computed as 0px

[pchaganti]

I am trying to create a page with a sticky page header and a sticky page footer. The page itself consists of a sidenav and content. The sticky page header and page footer work just fine. However my sidenav does not stay sticky when I am scrolling the content on the page. I tracked it down to --awsui-header-height and --awsui-footer-height being computed as 0px.

element.style {
    --awsui-header-height-3j0evk: 0px;
    --awsui-footer-height-3j0evk: 0px;
    --awsui-layout-width-3j0evk: 1775px;
    --awsui-main-offset-left-3j0evk: 388px;
    --awsui-min-content-width-3j0evk: 280px;
    --awsui-notifications-height-3j0evk: 0px;
}

If I use devtools and manually change those values to the heights of the header and footer, then sticky sidenav works correctly. Anyone have any pointers to what I am doing wrong? Any info really appreciated as I have been banging my head against this for a while!

thanks!

[rubencarvalho]

Hello Prabhakar,

If your application has a custom header or footer, you need to specify their selectors via headerSelector and footerSelector properties respectively on the AppLayout component. These selectors are used to ensure that the AppLayout position (including its side navigation, which should be used in the navigation slot) doesn't overlap the header and footer elements.

If this doesn't fix it, please provide some example code so we can further look into it.

Thank you!

[pchaganti]

Ah! Thanks!!