Hide Topbar Menu in Mobile View

[mrjWells]

I would like to hide the topbar menu, but only in the mobile view. Tried this CSS but it didn’t work.

@media screen and (max-width: 320px) {

#top-bar .visible-phone {
display: none !important;
}

Thanks for your help as always!

[Rui Guerreiro – SUPPORT]

Hi,

Almost there just missing one closing bracket.
Also the mobile portrait goes to 479px

Try this one

@media screen and (max-width: 479px) {

#top-bar .visible-phone {
display: none !important;
}
}

-Rui

[mrjWells]

Oops! Thanks for the correction. This code successfully removes the menu items in mobile view, but the top bar associated with the top menu is still visible. Is the a way to remove both the top menu and the top bar in mobile view?

http://AdvancedLifeSkills.com

[Mohammad – SUPPORT]

Hi,
Please remove last code and use this one new code:-

@media screen and (max-width: 479px) {

#top-bar .visible-phone,#top-bar {
display: none !important;
}
}

Thanks
Mohammad

[mrjWells]

Works perfect in Chrome, but for some reason the top bar is still visible in Firefox and Safari.

[Kyle – SUPPORT]

You only added:

#top-bar .visible-phone {
display: none !important;
}

it should be:

#top-bar .visible-phone, #top-bar {
display: none !important;
}

– Kyle

[mrjWells]

My fault. I had the code right but neglected to empty the page cache. Did that and it’s working perfect now in all browsers.

Thanks!

[Kyle – SUPPORT]

Ok no problem