Community Forums › Forums › Archived Forums › General Discussion › Magazine Pro Primary Menu hidden on mobile devices
Tagged: Magazine Pro, menu, mobile responsive
- This topic has 4 replies, 2 voices, and was last updated 9 years, 4 months ago by anotherusername.
-
AuthorPosts
-
December 6, 2014 at 8:36 am #133811cspowersMember
Howdy,
I just (re)installed Magazne Pro to pick up the latest version 3.1 to hopefully fix a bug I'd seen in the previous versions, but it still seems to be present.
If you specify a primary menu, it looks and works great on a desktop web browser view. But f you shrink the browser on your desktop to be a mobile device size, or if you look at the web site on a small device mobile browser, the menu bar icon (i.e. the three horizontal lines) does not appear. There is space there for the menu, and it's actually there, but it's just a plain white bar. So unless you know to click there, the menu doesn't drop down. But if you do click on that white bar, the primary bar drops down and it works ok. So the only problem is that the menu icon is not appearing.
If I specify the same exact menu as the secondary menu, it works perfectly. I see the menu icon (three horizontal bars) on any browser/any device and it works just as expected.
I've been using the secondary bar instead of the primary bar in order to avoid the bug. But the problem is that you can't specify the search box on the secondary menu, which is very handy to have.
As far as I know the issue is not browser specific. I'm running on Windows 7 and I see it on both Chrome and Firefox. My phone is an Android Samsung Galaxy Nexus and I see it on both the default browser and the Chrome for Android Browser.
For right now, I've got my menu in both the primary and secondary spots to illustrate the issue. I'll leave it up for the next couple of days so people can try it out for themselves on different browsers.
You can see it at http://americanamusicshow.com
Anyone know of a work around to get the menu bar icon to appear on the primary menu when browsing via mobile device?
Thanks
http://americanamusicshow.com
Calvin Powers
[email protected]December 6, 2014 at 9:42 am #133819anotherusernameParticipantTry changing .nav-primary { color: #fff;} to a different hex color (like #000)
Then find / add #menu-primary {display: none;} and see if that works.
I see in the SECONDARY menu the display:none; is inline. That is part of the reason it works with the navigation hamburger.
What I have suggested may or may not work, and you may or may not end up borking your site. Following my advice may or may not cause you to crash your site, or give up running a website altogether , cause cats and dogs to become friends, lead to nuclear Armageddon, or cause otherwise sane people to start listening to Justin Bieber...
In short, use at your own risk.
December 6, 2014 at 9:56 am #133820anotherusernameParticipantAnd since I am already providing marginal advice which may or may not cause endless frustration on your part, might I also suggest that you go to your custom.css file and look for:
.entry-title a {
and add the following rule:
display: block;
In fact, if I were you (and you should thank Heaven that you are not me), I would change the whole class to this:
.entry-title a { color: #FFF; clear: both; font-size: 1.6rem; margin-bottom: 1.4rem; background-color: #8C4058; padding: .3rem .3rem .4rem .8rem; display: block; text-decoration: none; font-weight: 600; }
There you have it: marginal CSS advice that may or may not work.
December 7, 2014 at 8:59 am #133889cspowersMemberUpdate:
So digging into the code, i saw that the responsive menu icon is a character out of a font set called dashicons:
.responsive-menu-icon::before {
content: "\f333";
display: inline-block;
font: normal 20px/1 'dashicons';
margin: 0 auto;
padding: 10px;
}The exact same code is used for both the primary and secondary menus. But when I compared the computed style of both, what I discovered is that the font color on the primary menu was 255,255,255 but on the secondary menu it was 34 34 34. Given that the background is also white, or very nearly, that explains why it can't be seen.
Not sure why the font color got set to white on the primary menu, But I have been doing a lot of tweaks to my menus so I'm willing to believe that my tweaks introduced the bug instead of being in the magazine pro theme itself.
So I hacked in a hard coded color definition like this:
.responsive-menu-icon::before {
content: "\f333";
display: inline-block;
font: normal 20px/1 'dashicons';
margin: 0 auto;
padding: 10px;
color: rgb(34, 34, 34); /*added */
}And it seems to be working great now with no bad side effects (that I can see so far).
December 7, 2014 at 10:52 am #133899anotherusernameParticipantLooks like it's working now.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.