Hiding a DIV on desktop


I am trying to hide a DIV only on desktop. using Media queries.

When I tried to do it, however, I guess I selected the wrong div because it also hid another div.

Please go to this page:  Look at the 2 "Practice Area" menus

There are two menus with the name "Practice Areas".  Near the top left is a hamburger version which should NOT show on Desktop.  I need to hide the hamburger and the words "Practice Areas' which are to the right of it on desktop.

However I don't want it to affect the Desktop version of the Practice Areas menu.

When I tried to hide it, I ended up hiding both menus on desktop.

Here's  a screen capture with hopefully some helpful info -- just to make everything clear.

I think the div is module-content     At least that's the div around the hamburger version.  

UPDATE:  I just went in and added some debugging info that you'll see on the top and bottom of the hamburger menu.   I also added an "X" to the module position name.  Hopefully that will help add the needed hook to the css to make it different from the other Practice menu.
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
that element is the one and only which has these two classes:
- module
- MenuTabletAndCell

The jQuery selector is:

Open in new window

Therefore just create the following CSS for usage for desktops:
div.module.MenuTabletAndCell {
    display: none

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Hi Rainer,

Thanks for helping.

I added
div.module.MenuTabletAndCell {
    display: none

Open in new window

to the top of my custom css file and it hid the hamburger menu on desktop.

However it's also hiding it on cell and tablet.

So do we need to activate some additional media query to target desktop and let it show on tablet and cell?


You can also use bootstrap's hidden-lg class.
<div class="hidden-lg">I am not visible in large screen sizes. But I am visible in others.</div>

Open in new window

Rowby GorenAuthor Commented:
THanks I'll try the hidden-lg class a llittle later today.

Rowby GorenAuthor Commented:
Thanks.  I found both solutions helpful

And it's working now.

Sorry for the delay in awarding the points.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.