Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Sticky toolbar and sticky components broken in latest release (Good – Bootstrap 5 Admin Dashboard Template)


I have installed the latest release of Good – Bootstrap 5 Admin Dashboard Template (v1.1.1) and now the sticky toolbar is broken (no longer sticky). I checked the latest components page and your sticky demo example also does not work.

https://preview.keenthemes.com/html/good/docs/general/sticky

Please advise of a workaround until you can resolve this issue.

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


The issue seems to be with this line in scripts.bundle.js

if ( top >= 0 ) {
KTUtil.css(the.element, 'top', String(top) + 'px');
}



Hi,

This is a feature and improvement in the latest Good version. If the sticky block's height is larger than the available space then the sticky mode is not activated. Please try to stretch your browser's height and it should work as expected.

if you need to force the sticky mode regardless it's height then please let us know and we will add an option to configure it for this case.

Regards.



Hi Sean,

I'm not sure what you mean but the sticky toolbar is no longer working. If you go to Layout Builder and select Sticky Toolbar under Advanced tab then click Preview you will see the toolbar disappears when scrolling on longer content pages.

As a workaround I set some css as per below so the toolbar appears correctly when scrolling. This works on most pages but if there is only a small amount to scroll down then scrolling causes and endless flickering issue.


@media (min-width: 992px) {
[data-kt-app-toolbar-sticky=on] .app-toolbar {
top: var(--bs-app-header-height) !important;
}
}


Can you advise? Thanks



Hi,

I have tested it and it's working as expected:



Can you please try to refresh your browser's cache and retry? If the issue still persists can you please send us screenshots via https://imgur.com/ and let us know your OS and browser versions?

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(