newcoder1010 Posted November 24, 2015 Share Posted November 24, 2015 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 More sharing options...
Ingolme Posted November 25, 2015 Share Posted November 25, 2015 This looks like a Drupal menu. From the Drupal menus administration you can just remove the item. Other ways to hide it would be CSS or Javascript. Link to comment Share on other sites More sharing options...
newcoder1010 Posted November 25, 2015 Author Share Posted November 25, 2015 (edited) I like to hide it using css. I am not sure how to specify the node=72 item. I can do first and last not the others. Can you please help? Edited November 25, 2015 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 25, 2015 Share Posted November 25, 2015 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. 1 Link to comment Share on other sites More sharing options...
typomaniac Posted November 25, 2015 Share Posted November 25, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 25, 2015 Share Posted November 25, 2015 Span or any other element cannot be placed outside a li elememt. Link to comment Share on other sites More sharing options...
newcoder1010 Posted November 25, 2015 Author Share Posted November 25, 2015 "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 More sharing options...
dsonesuk Posted November 25, 2015 Share Posted November 25, 2015 ul.menu.nav li:nth-of-type(4) {display: none;} Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now