Monochrome theme – menu trouble on mobile?

[Kennoath]

This site using Monochrome has a nav problem.

The hamburger menu, when opened & a sub item expanded, expands below the fold but it does not scroll and you can't see the bottom items in the menu. Also once open, the icon doesn't become an X which might help less savvy users to get back out of the menu and onto the original landing page. The menu usability is causing a few complaints. It is worse on iPhone than Android.

Playing with the Monochrome demo, I now have a feeling that maybe the problems are built-in, not that we've broken anything.

Thanks for any tips!

http://www.etax.com.au

[sangfroidweb]

Hi there,
You are right!...the demo has this same issue. I've never noticed that before...I think we've only done 1 site using Monochrome Pro, but I'm going to go check it on that one...so thanks for pointing it out!

The issue is that site-header has fixed position even on mobile, which is the reason the user cannot scroll when the menu exceeds the height of the screen (bad for usability). To address that issue, we need to change the position of the site-header to relative when the mobile menu shows up, and then remove some top margin from site-inner (that was there to accommodate the fixed header.)

The stylesheet on your site is minified, so I can't tell you exactly where to put this in the stylesheet, but essentially this is the CSS that needs to be added. I'm putting it all together here, but there might be existing places in the stylesheet where these adjustments can be made. Note that this first part is inside a media query for screens with a max-width of 782px.

@media only screen and (max-width: 782px) {
/*This makes the site header not fixed to the top of the screen*/
.site-header {
position: relative;
}

/*This removes the top margin that was making room for the fixed header*/
.front-page .site-inner,
.site-inner {
margin-top:0px;
}
}

Here is some CSS that will add an X to the menu icon when the mobile menu is open.

/* This will add an X to the activated mobile menu to signify to close the menu */
.menu-toggle.ion-navicon.activated:before {
content: "\f12a";
}

Let me know if you don't have luck with any of this CSS and we take another look and see what's up.

Hope it helps! Thanks!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Kennoath]

Liz, you are awesome.
Thank you.

[Kennoath]

Hi Liz,

One problem there is that it causes (mobile) content pages to revert to a different site-inner padding-top value of 130, which puts a big space above the H1.

Also, on page load sometimes you can see the menu contents flash onscreen before it renders properly.

You can see the relevant styles inline on the site right now.

[sangfroidweb]

Hi again!
I see what you mean...this theme is using jQuery to dynamically add the margin to the top of site-inner. Without having to get into the functions file to edit that code, you could just override it with an !important. In that previous bit of CSS I posted above, try changing the margin-top value to something like 30px (or whatever you'd like it to be) (inside the media query for max-width 792px) and include an !important. (see below) This seems to work ok when looking at it in the inspector.

@media only screen and (max-width: 782px) {
.front-page .site-inner,
.site-inner {
margin-top: 30px !important;
}
}

Hope it helps! Let me know if there are still issues.
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[sangfroidweb]

...and actually, you may need the margin to remain 0px on the home page...so this would be what you need...

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

.site-inner {
margin-top: 30px !important;
}

.front-page .site-inner {
margin-top: 0px !important;
}

}

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Kennoath]

Liz thank you. Works perfectly.

Without wanting to respond to your help by over-asking, have you ever seen a site flashing open its menu contents on (mobile) page load, like ours is now?

Cheers,
Ken

[sangfroidweb]

No worries, Ken. I have seen what you are talking about, where the menu appears open for a fraction of a second, and it most likely has to do with how long it takes the javascript for the menu-toggle button to load on the first view. After that first view, it's stored in the cache, so you may not see it after the first look. That's what I'm seeing on your site....only when I clear cache and refresh do I see it flash for a second. As far as what to do about it, it's unfortunately not my area of expertise. Sorry!...wish I could help more, but try asking in a new question, and maybe someone else will have some advice.

Thx!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Author]

Posts