Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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?


user
i Taiizor 3 years ago
Metronic Blazor
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
i Taiizor 3 years ago 


<!--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" rel="noopener noreferrer">

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


user
i Taiizor 3 years ago

I solved the problem.

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


user
Lauris Stepanovs Author 3 years ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(