Disable toggle navigation for specific web page

(0) Share

Report

Posted on by ragavanrajan

7,044 Most Valuable Professional

Hi Folks,

I have a scenario where in one of my web page I would like to hide the toggle navigation. Below is the screenshot.

In Page X- I would like to hide the below toggle navigation part and would like to keep it in rest of the other pages.

I have tried the custom css in the web page even with the important tag but it has no effect. 😞

Any thoughts ?

Categories:

Power Apps portals

I have the same question (0)

All responses (5)

Answers (1)

Sort by

Fubar 17 Super User 2026 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

You should be able to hide it with CSS but need to remember that there is more than 1 Media rule and DOM structures that you will have to handle (as there are differences based on the browser width).

Alternatively the actual navigation tags are rendered in Liquid code within the Web Template "Header" and so you should also be able to wrap your own logic around it.

Or you could crate your own Page Template for the page in question and set the Header and Footer off, and manually add only what you want to the Web Template for the Page Template.

Was this reply helpful? Yes No
oliver.rodrigues 9,482 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!
have you inspected the element to check for a specific ID or Class?

if you can find a unique identifier you can hide it via jQuery/JS, for example:

$("#id").hide(); $(".class").hide()

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!
Thank you @Fubar , I will play around with page templates and let you know. First two options I couldnt find any thing feasible to go ahead.

Thank you @OliverRodrigues , I have tried the method you have suggested. this is my class
.navbar-toggle collapsed
and this is my data-target attribute "#navbar".

Added my custom jquery in Advanced section as well as under the Localized content advanced javascript section. Tried the sync conifg and restarted portal several time. basically no effect.

I can see error in the console. But it is a simple straight forward jquery logic. Not sure what is causing problem. Any advise on this pls

Was this reply helpful? Yes No
Fubar 17 Super User 2026 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

Try your CSS/JavaScript adjustments in your open your portals webpage and use your browsers (F12) Console first to make sure it hides what you need, and remember that your jQuery code needs to be wrapped in a $(document).ready

$(document).ready(function(){
// jQuery methods go here...
});

Was this reply helpful? Yes No
Verified answer

ragavanrajan 7,044 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!
Thanks again @Fubar . For some reason jQuery has no effect at all. But tried with the plain JavaScript and it works like a charm. Just adding the script here may be this will help someone in future.

document.getElementsByClassName("navbar-toggle collapsed")[0].style.visibility = "hidden";

Thanks.

Was this reply helpful? Yes No