Hiding a DIV on desktop

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hello

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.  
Thanks!

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.
RowbyMockup
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2013
Awarded 2012
Commented:
Hi,
that element is the one and only which has these two classes:
- module
- MenuTabletAndCell

The jQuery selector is:
jQuery(".module.MenuTabletAndCell").length

Open in new window


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

Open in new window


HTH
Rainer

Author

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?

Thanks

Rowby
Commented:
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


http://getbootstrap.com/css/#responsive-utilities-classes

Author

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

Rowby

Author

Commented:
Thanks.  I found both solutions helpful

And it's working now.

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