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

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Remove/disable/hide he...
Power Pages
Answered

Remove/disable/hide header bar on specific pages

(2) ShareShare
ReportReport
Posted on by 252

Hi everyone, 

 

I was wondering whether I could remove the header bar for specific pages only. I have pages that are available for anonymous users and I'd like for them not to navigate to the sign-in and home pages indicated in the header bar. Is this case possible? Can I add something in the header.html to make it not appear on these specific anonymous pages? 

 

EDIT: I saw a post about Web Page Access Control Rules. Will this help me? Even though the header is not hidden and they can press the Home or Sign In Button, as long as the Home page is hidden, I'm fine with that. Can the Web Page Access Control Rules help me in my case?

 

Thank you in advance

Categories:
I have the same question (0)
  • Verified answer
    domliu37 Profile Picture
    314 Super User 2024 Season 1 on at

    Hi @apangeles ,

     

    If you wish to hide the home page for anonymous user, you can edit the home page web template use the liquid code below.

     

    {% assign isAnonymousUser = user | has_role: 'Anonymous Users' %}
    <script>

    let _isAnonymousUser = "{{ isAnonymousUser }}";

    if (_isAnonymousUser ) {

    window.location.href = './<<Redirect Page Partial URL>>/'

    }
    </script>

     

    If you wish to hide the header 'sign in' and 'home' link for anonymous user, you can edit the home page web template, use the similier method as above, but then use JS to hide the signin/home link.

     

    Cheers,

    Dom

  • Verified answer
    Inogic Profile Picture
    1,135 Super User 2025 Season 2 on at

    Hi @apangeles,

     

    As per our understandings, You wish to hide or remove the “Header bar” which includes the navigations (Web links) to navigate different different Web pages.

     

    You can try out the Below JavaScript code to remove the “Header bar” from any specific page.

     

    $(document).ready(()=>{
    $(".navbar.navbar-inverse.navbar-static-top").remove();
    })

     

    In the design studio,

    Navigate to the Code Editor for the webpage where you want the header bar hidden. Insert the given code into the JS or HTML file by enclosing within a script tag.

     

    For a visual reference, please consult the screenshot provided below,

    Inogic_0-1696410674440.png

     

    Result:

    Inogic_1-1696410713841.png

     

    Thanks,

     

    Inogic Professional Services Division

    Power Platform and Microsoft Dynamics 365 CRM Development – All under one roof!

    Drop an email at crm@inogic.com

    Services:  http://www.inogic.com/services/

    Power Platform/Dynamics 365 CRM Tips and Tricks:  http://www.inogic.com/blog/

  • apangeles Profile Picture
    252 on at

    Hi @Inogic,

     

    As someone with zero knowledge about Liquid and beginner knowledge about web dev, I really appreciate you screenshotting where and how I should use the code. Thank you very much!

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

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Pages

#1
Fubar Profile Picture

Fubar 70 Super User 2025 Season 2

#2
Jerry-IN Profile Picture

Jerry-IN 55

#3
sannavajjala87 Profile Picture

sannavajjala87 31

Last 30 days Overall leaderboard