Disable toggle navigation for specific web page

[ragavanrajan]

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 ? 

[Fubar]

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]

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

[ragavanrajan]

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]

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 · Accepted solution]

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.