Community Forums › Forums › Archived Forums › General Discussion › OUTREACH THEME: Header/Logo Responsive-ness Help
- This topic has 4 replies, 4 voices, and was last updated 10 years, 8 months ago by Marcy.
-
AuthorPosts
-
July 21, 2013 at 10:27 am #51704vision14kMember
Hi,
I am working with the Outreach Theme. I've done a ton of searching on here and while this has been addressed, I have not yet found a solution that works for me. Could someone PLEASEEEE give me some insight onto how this person setup their header:
bit.ly/13WK5b5
Basically, I want my header to be the same.. so when you shrink the browser (or view it on mobile) the logo centers, then the menu changes to the upper right as in the website above. I want to set it up like this person has but can't figure out how he/she did it! Any help? I copied the CSS from the site and tried that, but it didn't work.
July 22, 2013 at 2:58 pm #51915RobinMemberHere is a post that you can start with.....
Need help customizing your website? Let me know at RKW Media.
I’m taking up The Challenge by answering some of the Unanswered Posts.
July 23, 2013 at 2:38 pm #52128MarcyParticipantThe Hilltop Church site uses several menus that are displayed or hidden using Media Queries for different size devices. I think their logo is always text-only.
They start on the desktop size with the Directions and Contact Us buttons in a text-widget inside the Header Right widget. They also use a menu in the Primary Navigation location.
They also have an additional widget added to the footer with a Custom Menu that uses the CSS -
#footer-nav-menu {
display: none;
}As you make the browser window smaller, the logo, Header Right widget, and Primary Navigation center. This is done in the Genesis sample with a media query (and maybe in Outreach?). Basically (I may have missed something)
@media only screen and (max-width: 768px) {
#header .widget-area,
#title-area {
width: 100%;
}.genesis-nav-menu li,
#footer .gototop,
#header ul.genesis-nav-menu {
float: none;
}.genesis-nav-menu,
#description,
#footer .gototop,
#header .widget-area,
#title,
#title-area {
text-align: center;
}
}Then for a smaller device size, they show the footer menu with
#footer-nav-menu {
display: block;
}and they hide the primary navigation with
#nav .menu {
display: none;
}They also add the menu button at the top that links to the #footer-nav-menu; I would use a bit of jQuery, but I think they just added the code to their functions.php; I'm not sure. They use the Genesis "gototop" to get back to the top.
To give you some more ideas on how to do this, you can look at this post too.
http://www.studiopress.community/topic/help-me-make-vertical-menu-more-responsive/
Marcy | Amethyst Website Design | Twitter
August 16, 2013 at 10:15 am #56827JohnParticipantAs 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 😉August 16, 2013 at 1:43 pm #56873MarcyParticipant@John That's a great tutorial post! It's hard to tell just what code is used without a peek at it. 🙂
Thanks for the peek.
Marcy | Amethyst Website Design | Twitter
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.