Need Help With Responsiveness

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

This topic is: not resolved

Tagged: education, Prose, responsive menu

This topic has 17 replies, 6 voices, and was last updated 11 years, 3 months ago by Gary10.

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
August 9, 2013 at 11:00 am #55265

grimes
Member

I have battled on and off with trying to get my Prose theme mobile responsive. It kills me honestly. I thought it would be responsive out of the box, and it's been a headache for me. My main problem right now is the menu. It doubles and or triples up if I add more menu items. I tried using the Responsive Header plugin I've seen recommended here by nickthegeek, but it doesn't work on my site for some reason. When activated, it only shows the header image and nothing else on mobile devices. I would really appreciate any help you can give. Here's the site: thesteelersfans.com

August 12, 2013 at 8:18 pm #55940

nimblewit
Member

Same issue here, would love any help: http://flourishyoga.com.au/

Thanks,

August 12, 2013 at 8:31 pm #55941

trump
Member

A big disappointment for me too. Portrait mode is just horrible.

August 14, 2013 at 10:38 am #56340

grimes
Member

Could someone help? How do I make the menu stop stacking? Anyone?

August 16, 2013 at 9:51 am #56818

jbculp
Participant

This isn't entirely the answer but I was modifying a theme (Education) yesterday and in the process of working through the responsive header (using this Blog Post) I noted that the developer has solved this issue. You can see his solution by following the links of his clients provided at the end of the post. Follow the link to Grace Church, using the Education theme.

When the churches URL is put into the Studio Press Mobile Responsive tool, you don't see the typical Education Stacked Menu but a menu icon at the top with a dropdown.

I asked the developer (John Sundberg) about it and he said he was about to publish a blog post discussing this very solution. After writing the above: I see John has published the post. Here is a link to his Studio Press posting and his Blog Post.

August 16, 2013 at 10:01 am #56823

John
Participant

You could try this mobile menu approach: How to add a mobile responsive menu to your Genesis WordPress website

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

August 16, 2013 at 5:12 pm #56931

grimes
Member

Thank you! I followed the steps in that tutorial, and it worked, though I do need help with one minor detail. How do I make it so that the new menu drop down replaces the primary menu? I want that hidden on mobile browsers.

As a side, I love the articles on your blog. Great presentation and easy to understand.

August 17, 2013 at 6:34 pm #57106

John
Participant

grimes,

Sorry about the delay - I left for a short camping trip right after posting that blog tutorial.

I'm assuming we're talking about the site thesteelersfans.com? That has a menu set-up I haven't seen yet, so I just updated the CSS in the tutorial to include #nav which should hide the primary menu when the device width gets down to 600px. If you try it again, let me know if it does or doesn't take care of that.

John

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

August 17, 2013 at 7:26 pm #57112

grimes
Member

I was working on a dev. setup, but yes, that's the site in question, and thanks- that did it!

August 17, 2013 at 7:42 pm #57114

John
Participant

Sweet! Let me know when you go live with it - I'd like to see it in action on someone else's website.

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

August 19, 2013 at 9:02 am #57319

John
Participant

grimes,

I just took a look at your live site and noticed that the CSS for the mobile menu didn't look quite right. I checked my CSS code in the Gist posted in the tutorial and realized there were some extra spaces in the selectors that would prevent the CSS from working correctly. I've fixed those now, so you may want to update your CSS too.

John

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

August 22, 2013 at 5:30 pm #58305

Gary10
Member

Dumb question before I do this. If you edit the genesis functions.php, don;t the edits need to be redone each time Genesis updates?

August 22, 2013 at 5:37 pm #58310

John
Participant

Gary,

You should only edit the functions.php that is in your child theme directory. Genesis won't touch that when it updates.

John

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

August 22, 2013 at 5:54 pm #58316
Gary10
Member
John, first I want to thank you for your service to non-profits, churches and the Genesis community.

The theme I an working on is Prose, which unequivocally states "do not edit."
```
<?php
/*
 WARNING: DO NOT edit this file under any circumstances.
 Please do all PHP modifications via the Custom Code admin menu.
*/

/**
 * This file calls the init.php file for both Genesis and Prose.
 *
 * It initializes the Genesis framework, and loads the Prose library as well.
 *
 * This file is a core Prose file and should not be edited.
 *
 * @author   StudioPress
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     http://www.studiopress.com/themes/genesis
 */

/** Start the engine */
require_once( get_template_directory() . '/lib/init.php' );
require_once( get_stylesheet_directory() . '/lib/init.php' );

prose_create_custom_php();
```
August 22, 2013 at 6:01 pm #58322

John
Participant

Ahh, now I see why you were asking. I haven't looked at Prose before.

I guess you could add the code to the Custom Code admin menu like they suggest, or you could try adding it to lib/init.php and see what happens. If something breaks you can just reverse what you did, assuming you're uploading your files with a FTP client and not using the Theme Editor in the WordPress admin.

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

August 22, 2013 at 6:04 pm #58323

jbculp
Participant

Gary10,
Are you looking at the Functions.php in the Genesis folder or the one in your theme's folder. I don't have Prose but all my other themes have their own functions.php so for example, with the Education theme, the functions.php file I would edit is here:

/www/mysite/wp-content/themes/education

Hope this help.

August 22, 2013 at 6:11 pm #58325

grimes
Member

John, sorry for the delayed reply. I made the updated edits and all is well. Thanks again.

I use prose, and you can edit the functions.php file. In fact, for this mobile menu mod, I added the CSS to the custom code area, and added the functions code to the end of the functions.php file. IIRC, it wouldn't show up when I entered it into the custom code area. Good luck.

August 22, 2013 at 6:16 pm #58326

Gary10
Member

John,

Prose is a little different than the other themes. It provides the user with a deign GUI for those who do not know html and CSS. Tomorrow is another day. I use FTP, will try your code in a few places and report back with the results for you to share with other Prose users.

FYI, I tried their custom code field without results.

Your code will come in handy for our other sites.

Thank you!

Gary
Author

Posts