Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
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
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" target="_blank">
<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
