Responsive Menu

Hi, I am trying to reduce the size of my mobile site by removing some obscure pages from the menu using @media

I am trying to use...

@media screen and (max-width: 400px) {
#menu311 {display:none;}
#menu325 {display:none;}
#menu315 {display:none;}
#menu349 {display:none;}
#menu336 {display:none;}
#menu337 {display:none;}
#menu782 {display:none;}
}

But, this is not working. Anyone know the right way?

TIA

I can remove a menu item using #menu311 {display: none;} - and on the computer it doesn't display - but on the phone it still displays. I delete my phone cache and even installed a new browser and it still displays.

So, the menu is not responsive? Is there something I can do to make the mobile menu not display certain menu ids?

tIA

By the cricket noise - I assume the menu ids are not responsive on mobile???

I am sure there has to be a way - since it does work on the desktop.

??

Hi

There are 2 different menus. One for desktop other for mobile. Also there are 2 different styles for menu. Please tell me the url to Your site, so I'll be able to see how menu options can be disabled.

http://www.protoolstraining.com/pmtupdate/

Thanks

Hi

Ok. It's a little bit complicated, but try this solution. Add this to override.css and make sure override is enabled in template:

Code: Select all

#gkAsideMenu ul.gkmenu > li:nth-child(3),
#gkAsideMenu ul.gkmenu > li:nth-child(5) {
display: none;
}


numbers in nth-child() says which element should be removed.