Forum Replies Created
-
AuthorPosts
-
August 23, 2013 at 2:23 pm in reply to: How to add a mobile responsive menu to your Genesis WordPress website #58511JohnParticipant
Glad you tried it!
For change #1 I may need to see the site in question before I can be of much help, but you could try changing the action hook genesis_header to genesis_after_header that might work.
For change #2, if you change the action hook genesis_before_footer to genesis_after_footer in the functions.php code, that should do the trick.
Making either of these changes will probably require some CSS edits to make the changes complete.
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉August 23, 2013 at 9:35 am in reply to: How to add a mobile responsive menu to your Genesis WordPress website #58420JohnParticipantSounds like you're on the right track. I don't ever recommend using the built-in editor - if you break something there you can be locked out of your site. And commenting your code is always a good idea, like you mentioned.
Looking forward to seeing how it works out for you.
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉August 23, 2013 at 6:56 am in reply to: How to add a mobile responsive menu to your Genesis WordPress website #58396JohnParticipantHi Olivier,
A tutorial like this one expects (requires?) some level of comfort with modifying code, whether that code is CSS or PHP, but you'll never reach that comfort level until you start somewhere. Breaking websites by trying something new is a great way to learn, and it's how most of us learned to do this, I suspect. Just have a way or a plan for un-breaking what you do break. Also, it's a good idea to try something new on a backup copy of your site before you do the live version, though it can be more exciting to do the live version first. 🙂
I looked at the mobile menu on Twenty Thirteen after you mentioned this, and it's okay, but if your menu is much bigger than what they have there I think you'll want to try a different method. My opinion, anyway.
As far as changing a child theme, StudioPress, and probably every other theme shop you can find, expects you to modify the child theme to some extent. After all, the reason we use child themes is so that we can easily make modifications to our websites. Other than Genesis being updated on a semi-regular basis, which doesn't affect your child theme's files, child themes are rarely updated. And even when they are the number of files in a child theme is minimal, so comparing the old and the new and preserving your modifications isn't really a big deal at all.
So go break something, and have fun learning while you do it! And if you try the tutorial and get stuck, drop me a comment on my blog post and I'll help you out the best I can.
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantAhh, 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 😉JohnParticipantGary,
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 😉JohnParticipantNo worries. This wouldn't be the first time someone tried a complex solution to a simple problem. We're probably all guilty of that more than we care to admit.
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantIf it's your full-width pages that you want them removed from:
.full-width-content .breadcrumb { display: none; }
I'm assuming full-width since that's the similarity I see between those two pages.
Better yet, you could create a new template file and include this code somewhere on that page:
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
Then assign that template to the pages you don't want to have breadcrumbs on. That's probably the way I'd go with this.
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantollip2k,
There is a better solution: How to replace the StudioPress background header image with a real image logo
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantgrimes,
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 😉JohnParticipantGood thing for backups! When you do try it, just make sure it's a /* at the beginning and not a */ ... the order does make a difference.
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantSweet! 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 😉JohnParticipantgrimes,
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 😉JohnParticipantDoug,
72 degrees, sunny, and beautiful as always in the Black Hills!
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantAs the person who built the Hilltop site you linked to I think I can help you out...
The tutorial that Robin linked to explains how to add an image logo to the site, and this tutorial that I just published today explains how to add the mobile responsive menu: How to add a mobile responsive menu to your Genesis WordPress website
Thanks for the link!
Your explanation was really close, but not quite there. The logo is actually an image, and not text, and the "Back to Top" button is hardcoded in the code that get's added to functions.php. I hadn't thought of using the Genesis "gototop" function, but that would be an idea to consider. The tutorial I mentioned above explains how to make it all happen.
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantYou 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 😉JohnParticipantHey Doug,
It actually works in Firefox, but to make it work better across more browsers, try changing
a:hover
to
a img:hover
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantHi Brad,
If you only added the */ at the end of the code, and didn't add the /* at the beginning of the code, then you're probably getting a PHP error. If that's the case then you won't be able to log in to your WordPress admin to do the fix in the Theme Editor. Instead you'll need to do it via FTP.
If you need help with that you can send the FTP login details to me using the contact form on my website.
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantYou could just hide the breadcrumbs with CSS on that one page. Which page are you wanting to remove them from?
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantHi Connor,
Yeah, I can give that a shot. I'm curious if there's something different going on with Modern Portfolio that would skew the results of the tutorial.
You can send the info to me using my contact form, and if you have the FTP info also that would make it much easier.
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉JohnParticipantHey Connor,
This will go smoother if you follow this tutorial for the logo image: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/
Then increase the header height and add some top margin to your menu widget area with this CSS, which you might need to tweak just a bit:
#header {min-height: 130px;} .widget-area.header-widget-area {margin-top: 20px;}
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉 -
AuthorPosts