Hi @Erandi ,
We are bit unclear about you requirement but as per our understandings, you are looking for a how to hide Main Navigation in power pages portal after checking some condition. So, you can follow below steps.
• Open the Web Template named "Header." You can locate this in the Power Pages Management or Portal Management App.
• Make a simple adjustment in your Web Template. Utilize Liquid to hide blocks based on conditions related to the user object.
•
{% assign defaultlang = settings['LanguageLocale/Code'] | default: 'en-us' %}
{% assign homeurl = website.adx_partialurl %}
<div
class='navbar navbar-inverse navbar-static-top'
role='banner'
id='navbar'
style='display: none;'>
<div
class='skip-to-content'>
<a
href='#mainContent'>{{ resx.Skip_To_Content | default: 'Skip to main content' }}</a>
</div>
<div
class='container'>
<div
class='navbar-header'>
<div
class='visible-sm-block visible-md-block visible-lg-block visible-xs-block navbar-brand'>
{% editable snippets 'Mobile Header' type: 'html' %}
</div>
<button
type='button'
class='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>
</div>
{% if user %}
{% assign primary_nav = weblinks.Default %}
{% if primary_nav %}
<nav
aria-label='{{ resx.Main_Navigation | default: "Main Navigation" }}'
class='navbar-right menu-bar {% if primary_nav.editable %}xrm-entity xrm-editable-adx_weblinkset{% endif %}'
data-weblinks-maxdepth='2'>
<ul
class='nav navbar-nav weblinks'>
<!-- Add your navigation links here -->
<!-- Example: -->
<li><a
href="#">Link 1</a></li>
<li><a
href="#">Link 2</a></li>
<!-- End of navigation links -->
</ul>
</nav>
{% endif %}
{% endif %}
</div>
</div>
<!-- Button to show navigation -->
<button
id="showNavigationButton"
onclick="showNavigation()">Show Navigation</button>
{% substitution %}
<!-- Your substitution code goes here -->
{% endsubstitution %}
<script>
function
showNavigation() {
// Show the navigation bar
var navbar
= document.getElementById('navbar');
if (navbar) {
navbar.style.display
= 'block';
}
// Hide the button
var showNavigationButton
= document.getElementById('showNavigationButton');
if (showNavigationButton) {
showNavigationButton.style.display
= 'none';
}
}
</script>
NOTE:- Before making any changes to the header, it's advisable to back up your code.
We've customized the solution based on our understanding. In this setup, the main navigation will only be visible to authenticated users upon button click. You can modify the visibility conditions according to your specific requirements.
Thanks!
Inogic Professional Services
An expert technical extension for your techno-functional business needs
Power Platform/Dynamics 365 CRM
Drop an email at crm@inogic.com
Service: http://www.inogic.com/services/
Power Platform/Dynamics 365 CRM Tips and Tricks: http://www.inogic.com/blog/
