cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ragavanrajan
Super User
Super User

Disable toggle navigation for specific web page

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. 😞 

 

 

 

ragavanrajan_1-1606100084477.png

 

Any thoughts ? 

1 ACCEPTED SOLUTION

Accepted Solutions
ragavanrajan
Super User
Super User

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. 

View solution in original post

5 REPLIES 5
Fubar
Solution Sage
Solution Sage

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. 

OliverRodrigues
Super User
Super User

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()

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

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 

Fubar
Solution Sage
Solution Sage

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...
});

ragavanrajan
Super User
Super User

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. 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

365 EduCon 768x460.png

Microsoft 365 EduCon

Join us for two optional days of workshops and a 3-day conference, you can choose from over 130 sessions in multiple tracks and 25 workshops.

Carousel_PP_768x460_Wave2 (1).png

2022 Release Wave 2 Plan

Power Platform release plan for the 2022 release wave 2 describes all new features releasing from October 2022 through March 2023.

Users online (5,071)