Blazor Integration Sticky Header

I am using Metronic Blazor. While the sticky header normally works, it doesn't work on mobile. The part that works in the video below is the html demo.

Do I need to trigger a function to make it work on the mobile as well?

https://drive.google.com/file/d/10Bu0OYhaeSmAajMxVzEE6WyVc-K1tKU3/view

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 (3)

<!--begin::Header-->
<div class="app-header" data-kt-sticky="true" data-kt-sticky-activate="{default: false, lg: true}" data-kt-sticky-name="app-header-sticky" data-kt-sticky-offset="{default: false, lg: '180px'}">
<!--begin::Header container-->
<div class="app-container container-xxl d-flex align-items-center justify-content-between" >
<!--begin::Header mobile toggle-->
<div class="d-flex align-items-center d-lg-none ms-n2 me-2" title="Show sidebar menu">
<div class="btn btn-icon btn-active-color-primary w-35px h-35px" >@((MarkupString)KTTheme.getSvgIcon("duotune/abstract/abs015.svg", "svg-icon svg-icon-2"))</div>
</div>
<!--end::Header mobile toggle-->
<!--begin::Logo-->
<div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0 me-lg-15">
<a href="?page=index">
<img alt="Logo" src='@KTTheme.getAssetPath("media/logos/custom-2.svg")' class="h-25px h-lg-40px" />
</a>
</div>
<!--end::Logo-->
<!--begin::Header wrapper-->
<div class="d-flex align-items-stretch justify-content-between flex-lg-grow-1" >
<_Menu></_Menu>
<_Navbar></_Navbar>
</div>
<!--end::Header wrapper-->
</div>
<!--end::Header container-->
</div>
<!--end::Header-->

I solved the problem.

It was fixed by adding _helper.addBodyAttribute("data-kt-app-header-fixed-mobile", "true"); to _Master.cshtml.

Hi,

Yes, it is how you can make a fixed header on mobile. Let me know if you will need any further help.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

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  :(