Sticky Menu — Remove when resolution is below 600px

[eef]

I used the tutorial for the sticky menu to add one to my website: http://eefdesigns.com

What I'd like to do is have it work normally, but when the resolution drops below 600px or so (like if someone is visiting my website on a phone) have it disappear so that it's not taking up the entire screen! What is the best way to accomplish this?

Thank you!

http://eefdesigns.com

[Robin]

You can tackle it with CSS in one of two ways, I think. Add this to the media query section where you do not want the sticky menu behavior anymore:

.nav-secondary {
		display: none !important; /* option one */
		position: relative; /* option two*/
	}

The first option will hide the sticky menu altogether on small screens, which is fine since it's the same as the primary. The second option keeps the sticky menu but it overlays the primary. They might notice it on scrolling, but they might not. Try both and see if they work for you. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[eef]

Thanks! I tried display: none yesterday and it worked on my computer but not my phone--so I thought there had to be something I was missing... but today it works, so perhaps just a chaching issue. All set now! Thanks!

[Author]

Posts