Hey All,
I am using the out-of-box hamburger header from powerapps. I noticed that on a smaller screen the navigation menu loads up when it should only happen when toggled. The code is the default supplied by powerapps. I have added it below. Please let me know what i can change, thanks.
html
<button
type="button"
class="mobile-float-none navbar-toggle collapsed"
title="{{ snippets["Header/Toggle Navigation"] | default: resx['Toggle_Navigation'] | h }}"
data-toggle="collapse" data-target="#navbar" aria-expanded="false" onclick="setHeight();">
<span class="sr-only">{{ snippets["Header/Toggle Navigation"] | default: resx['Toggle_Navigation'] | h }}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
The out of box function is this:
function setHeight() {
var windowHeight = window.innerHeight - 140;
console.log(window.innerHeight);
var navbar = document.getElementById("navbar");
if (navbar) {
navbar.style.maxHeight = windowHeight + "px";
}
}
window.addEventListener("resize", function(event) {
setHeight();
});