How to hide Main Navigation in power pages portal

[Erandi]

hi,

according to my requirement i need to hide main navigation after signing. after checking some condition, need to display main navigation again. Please help me to do it.

thank you

[Inogic · Accepted solution]

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/

[Erandi]

Thank you very much I will go through this @Inogic