web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
🚀 Season of Sharing Community Challenge Launch!
Ask A Community Pro - Series II
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / navbar is displaying o...
Power Apps
Unanswered

navbar is displaying on load

(0) ShareShare
ReportReport
Posted on by shar27 83

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();
});
Categories:
Building Power Apps
I have the same question (0)

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
🚀 Season of Sharing Community Challenge Launch!
Ask A Community Pro - Series II

Quick Links

Season of Sharing Community Challenge Launch!

Jump in, show your community spirit, and win prizes!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
Valantis Profile Picture

Valantis 483

#2
WarrenBelz Profile Picture

WarrenBelz 399 Most Valuable Professional

#3
11manish Profile Picture

11manish 327

Last 30 days Overall leaderboard

Featured topics

Auto-Populate field Power Pages
Gallery Tabs - Show or Hide Tabs based on Field Value
How to patch multiple records at once
Enable Copilot for end users in model-driven apps
Question for everyone : How are you using Create Text GPT in AI Builder?
Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)
Welcome to the Power Apps forum!

Product updates

Microsoft Power Platform Community release plans