Disable Header Widget in Responsive Mode (e.g., Mobile)

[mark_s]

Hi guys

I'm using the Genesis Sample theme and considering having a header widget area (with a menu), but I want to turn this off in responsive mode when the screen width goes below, say, 1023px... so only my logo would be in the header below 1023px.

In addition, the header widget area wouldn't then become a menu, it would be removed completely.

I'm guessing I'd change the media queries section in the css but I can't seem to find any guidance.. anyone have any experience on the matter?

Mark

[nutsandbolts]

You'd need to add a CSS rule in your media query for 1023px. Depending on which child theme you're using, it would look something like this:

.site-header .widget-area {
display: none;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[mark_s]

Simple as that! Thank you so much Andrea.

[Author]

Posts