Using Twitter Bootstrap is there a way to hide a menu item and show it only in Mobile?

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hello

I'm not sure if it is possible to use a css stylesheet to control the visibility of a menu item.  Or perhaps it can be done with JQuery?

Please look at this page:  Check the main top menu.

The last menu item on the page is "School of Music".  I would like to hide it on desktop and tablets-- and only show it on cell phone resolution.

Using Twitter bootstrap version 2 (not 3).  

Here's the HTML  
 <li class="mega last HasomAdditionalClass submenu-align-auto ">
<a id="menu2666" class="mega last HasomAdditionalClass " title="School of Music" target="_blank" href="http://schoolofmusic.ucla.edu/">
<span class="menu-title">School of Music</span>
</a>
</li>

Open in new window

Thanks for any suggestions.

Rowby.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
CSS:
@media (min-width: 700px) {
 .only-small {
  display: none;
 }
}

Open in new window

HTML:
<li class="mega last HasomAdditionalClass submenu-align-auto ">
<a id="menu2666" class="mega last HasomAdditionalClass " title="School of Music" target="_blank" href="http://schoolofmusic.ucla.edu/">
<span class="menu-title only-small">School of Music</span>
</a>
</li>

Open in new window

Owner (Aidellio)
Most Valuable Expert 2015
Commented:
just use the class "visible-xs". Any element with that class we'll only show on mobile

Author

Commented:
Thanks  Both solutions were helpful.

Sorry for the delay in awarding the points.

Rowby

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial