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 Pages Super User | MVP


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
Carousel Community Blog

Check out the Community Blog

Read all about the most recent blogs in the community!

Community Call Conversations

Introducing the Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Carousel News & Announcements

What's New in the Community?

Check out the latest News & Events in the community!

Users online (4,607)