Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude theme Search form in menu
Tagged: Altitude Pro theme - search
- This topic has 6 replies, 3 voices, and was last updated 6 years, 7 months ago by
NomadicJ.
-
AuthorPosts
-
October 1, 2017 at 8:30 am #212046
radu
ParticipantHey guys,
Wordpress newbie here but I'm hoping this is really simple for someone that knows what they're doing.
I am building my first WordPress site locally and am using the Altitude Pro theme. I wanted to add a search form to the navigation menu and added the code below, as suggested here:
<?php //* Do NOT include the opening php tag shown above. Copy the code shown below. add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 ); /** * Filter menu items, appending either a search form or today's date. * * @param string $menu HTML string of list items. * @param stdClass $args Menu arguments. * * @return string Amended HTML string of list items. */ function theme_menu_extras( $menu, $args ) { //* Change 'primary' to 'secondary' to add extras to the secondary navigation menu if ( 'primary' !== $args->theme_location ) return $menu; //* Uncomment this block to add a search form to the navigation menu /* ob_start(); get_search_form(); $search = ob_get_clean(); $menu .= '<li class="right search">' . $search . '</li>'; */ //* Uncomment this block to add the date to the navigation menu /* $menu .= '<li class="right date">' . date_i18n( get_option( 'date_format' ) ) . '</li>'; */ return $menu; }
That added the search form but for some reason, it is displayed below the menu and only 50% visible. I created this Imgur album.
This is how the theme looks like by default: https://imgur.com/rQRa8kA
This is how it looks like when I add the code: https://imgur.com/tcjZ9li
This is how I'd like it to look like: https://imgur.com/oPk4xId
I looked into the functions file to see if I can do anything to add the <li class="right search"> into the menu but can't find how to do that and I also looked at making changes into the CSS but didn't get anywhere. I've been struggling with this since yesterday so any help would be much appreciated.
Thanks guys.October 1, 2017 at 11:09 am #212060Victor Font
Moderator"I looked into the functions file to see if I can do anything to add the <li class="right search"> into the menu"
The class is already in the menu. It is added in the code you used.
This is a CSS issue. Cant help you though without a link to the live site. We need to examine the site to help you fix the CSS.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?October 1, 2017 at 3:11 pm #212062radu
ParticipantHey Victor,
Thank you for your input.
I appreciate you've taken the time to review my post. Unfortunately, the site is not live yet because I'm building it locally. I will do my best to host it for next week. In the meantime, I took a screen recording (here). Does that help at all?
I look forward to hearing from you.
Best wishes,
RaduOctober 13, 2017 at 2:51 pm #212495radu
ParticipantHi Victor,
I finally got around to getting the site live. It's here.
Does this help at all?
Thank you in advance for your input.
Best wishes,
RaduOctober 13, 2017 at 4:19 pm #212496Victor Font
ModeratorLook for this CSS around line 1335 in style.css:
.genesis-nav-menu > .search { display: block; margin: 0 auto; padding: 30px 15px; width: 50%; }
Change it to:
.genesis-nav-menu > .search { display: inline-block; margin: 0 auto; padding: 30px 15px; }
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?October 14, 2017 at 1:41 am #212505radu
ParticipantThat's great. It worked 🙂
I can see it adds some padding to the nav menu and increases the overall heading/menu height, leaving an awkward gap between the bottom border of the nav items and the nav border (hope that makes sense)but I'll play with that and hopefully get it to work.
Once again, thank you for your input.
Best wishes,
RaduJuly 17, 2018 at 9:11 pm #221760NomadicJ
MemberHi Radu
The site looks great and the search bar in the menu is exactly what we would like to achieve.
I have tried the steps outlined in this post but have been unable to achieve the same result.
Have copied the functions.php and CSS code exactly as it is expressed here but still no joy.
Can you confirm the final version of the code you have used in both functions and CSS and advise whether you took any other steps to achieve the end result in Altitude Pro?
Unfortunately my site is in staging so I can't share a url.
Cheers
John -
AuthorPosts
- The topic ‘Altitude theme Search form in menu’ is closed to new replies.