Jump to content

How to hide a menu item


newcoder1010
 Share

Recommended Posts

Hello,

 

I have the below code. How can I hide the 4th item whose node = 72?

<ul class="menu nav">
<li class="first leaf"><a href="/?q=node/49">Home</a></li>
<li class="leaf"><a href="/?q=node/55">Plan an Event</a></li>
<li class="leaf"><a href="/?q=node/52">Charters</a></li>
<li class="leaf active-trail active"><a href="/?q=node/72" class="active-trail active">Plan an Event</a></li>
<li class="leaf"><a href="/?q=node/66">Yacht Finished Business</a></li>
<li class="last leaf"><a href="/?q=node/62">Yacht Celebrity</a></li>
</ul>

Thanks.

Link to comment
Share on other sites

Are these classes a relation to this link being hidden?

 

'active-trail active'

 

IF yes, you can use these.

 

You can't use attribute selector for href to target '/?q=node/72' because it will only hide the anchor not its parent 'li'.

 

You could use nth-of-type for newer browsers, is another option.

  • Like 1
Link to comment
Share on other sites

css is a way you could do this, in your css sheet add something like

 

.ghost{display:none;}

 

and then in your html just add:

 

<span class="ghost"><li class="leaf active-trail active"><a href="/?q=node/72" class="active-trail active">Plan an Event</a></li></span>

 

Just make sure your span tag calls the class and don't forget to close the span</span> or everything will disappear. :happy0046:

Link to comment
Share on other sites

"Are these classes a relation to this link being hidden?"

'active-trail active'

I am not sure I understand you. All this menu links simply visible to public. Active-trail active displays for node/72 because I was on that page while I inspected in google chrome. Now I am on node/49 and inspected in google chrome below is the html:

<ul class="menu nav"><li class="first leaf active-trail active"><a href="/?q=node/49" class="active-trail active">Home</a></li>
<li class="leaf"><a href="/?q=node/55">Plan an Event</a></li>
<li class="leaf"><a href="/?q=node/52">Charters</a></li>
<li class="leaf"><a href="/?q=node/72">Plan an Event</a></li>
<li class="leaf"><a href="/?q=node/66">Yacht Finished Business</a></li>
<li class="leaf"><a href="/?q=node/62">Yacht Celebrity</a></li>
<li class="last leaf"><a href="/?q=node/73">Contact Us</a></li>
</ul>

"You can't use attribute selector for href to target '/?q=node/72' because it will only hide the anchor not its parent 'li'.

You could use nth-of-type for newer browsers, is another option."

As you can see i have node numbers repeated. Only option i have is css not html. This is for responsive site. I can display one node in mobile and other node in desktop. So I created different nodes/menu links for different devices. How can I write css to hide a specific menu link?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...