Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add search bar to secondary nav, and make header clickable
Tagged: and header clickable, search in navigation
- This topic has 3 replies, 2 voices, and was last updated 10 years, 6 months ago by Sridhar Katakam.
-
AuthorPosts
-
October 23, 2013 at 9:01 am #68432CJWheelsMember
Working with Lifestlye-Pro theme. http://illustrationstockyard.com/
I tried the Genesis Navbar Amplified, but it does not seem to work with Lifestlye-Pro. I also tried a couple tutorials to add it to the theme functions, and they did not work either.
For the header, I have the header coded in here:
.site-header {
background: url("images/header.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 200px;
overflow: hidden;
padding: 4.8rem 0 4.8rem 4.8rem;
}Just need that to be clickable....Seems like these should be easy, but I'm stumped.
http://illustrationstockyard.com/October 24, 2013 at 6:52 am #68602Sridhar KatakamParticipant1) Add this in child theme's functions.php:
add_filter( 'wp_nav_menu_items', 'genesis_search_secondary_nav_menu', 10, 2 ); function genesis_search_secondary_nav_menu( $menu, stdClass $args ) { if ( 'secondary' != $args->theme_location ) return $menu; $menu .= sprintf( '<li class="secondary-search menu-item right">%s</li>', __( genesis_search_form( $echo ) ) ); return $menu; }
Source: http://wpsites.net/web-design/add-search-form-to-any-genesis-nav-menu/
2) In the same file functions.php, change
//* Add support for custom header add_theme_support( 'custom-header', array( 'header_image' => '', 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 110, 'width' => 320, ) );
to
//* Add support for custom header add_theme_support( 'custom-header', array( 'header_image' => '', 'header-selector' => '.site-title a', 'header-text' => false, // 'height' => 110, // 'width' => 320, 'width' => 573, 'height' => 200, ) );
3) Go to Appearance > Header and upload this image as the Header.
4) Add the following at the end of child theme's style.css and adjust to suit. Note that you need not add some style rules as your site already has them. I just wrote all these to mimic your current site on my test install.
.site-header { padding: 0; background: none; } .title-area { width: 573px; } .site-header .widget-area { width: 328px; } .site-header .widget-area a { color: #B0CBC7; } .header-image .site-title a { min-height: 200px; } .genesis-nav-menu .secondary-search { padding: 0.6rem; } .header-widget-area .widget_nav_menu { float: right; } .genesis-nav-menu a { text-transform: uppercase; } .site-header .genesis-nav-menu .current-menu-item > a { color: #222; } .nav-secondary { background-color: #B0CBC7; } @media only screen and (max-width: 1139px) { .title-area { float: none; margin: 0 auto; display: table; } .site-header .widget-area { float: none; text-align: center; margin: 0 auto; } .header-widget-area .widget_nav_menu { float: none; } } @media only screen and (max-width: 674px) { .title-area { width: 100%; } } @media only screen and (max-width: 381px) { .site-header .widget-area { width: auto; } }
October 24, 2013 at 9:01 am #68627CJWheelsMemberThanks so much for your help. I was able to get the header to work no problem.
Still not able to get the search in the secondary nav to show. I did try the link you provided, and it just doesn't do anything. Any ideas on that search box?
http://illustrationstockyard.com/
Thanks!
CynthiaOctober 24, 2013 at 10:54 pm #68782Sridhar KatakamParticipantIf you would like me to log in and take a look inside, send me WP and FTP/cPanel info via http://sridharkatakam.com/contact/
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.