Remove/disable/hide header bar on specific pages

(2) Share

Report

Posted on by apangeles

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:

General topics

I have the same question (0)

All responses (3)

Answers (2)

Verified answer

domliu37 314 Super User 2024 Season 1 on at

Like (1)

Report

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

Was this reply helpful? Yes No
Verified answer

Inogic 1,135 Super User 2025 Season 2 on at

Like (1)

Report

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,

Result:

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/

Was this reply helpful? Yes No
apangeles 252 on at

Like (0)

Report

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!

Was this reply helpful? Yes No