Use php to align search box in nav?

  • Resolved nickg108

    (@nickg108)


    10 years, 6 months ago

    So Ive succesfully added a search bar into my navigation menu using:

    add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        $items .= '<li>' . $searchform . '</li>';

    return $items;

}

    and now I’m wondering if I have to use CSS to right align and put some padding on or can I put some more into the php? and code and help would be greatly appreciated!

Viewing 11 replies - 1 through 11 (of 11 total)

  • Please post URL of your site, only then we can help you out.

    Thread Starter nickg108

    (@nickg108)

    eweedery.com
    Sorry!

    First thing you need to do is put the search button code outside the menus

    <li> tag.</li>

    and then use float property of CSS to align it to the right.

    [Moderator note: In future please wrap your code in backticks]

    Thread Starter nickg108

    (@nickg108)

    Im a little confused, by put the button code outside the menus you mean in the CSS file? what would that code look like and whats the directory of the CSS file would i modify? And is that note to put the code in back ticks directed towards me? sorry if i seem ignorant. Thanks for the help

    Thread Starter nickg108

    (@nickg108)

    does anyone have any help for me? sorry to bump but i still haven’t solved the problem. Thanks! ??

    Thread Starter nickg108

    (@nickg108)

    To clarify:
    The code from the first post is in my functions.php file of my child theme, and I’m trying to learn how to call on it to give it the float property and padding. I have the Custom CSS plugin, so I’m trying to figure out what needs to be entered in the CSS plugin. My website has a NSFW topic btw (you can probably figure out the subject matter by the URL). Once again, eweedery.com

    Thanks for any help on the topic.

    Sensei

    (@wpupdateninja)

    Hi Nick

    2 things to overcome this issue, the only problem with this approach is if you have too many menu items in the future the ones to the right may appear under the Search bar.

    1) add an ID to the LI the search form is in $items .= '<li id="search_form_item">' . $searchform . '</li>';

    2) some CSS like this:

    #search_form_item{
    position:absolute;
    top:10px;
    right:7px;
}

    Let me know if that doesn’t have the desired effect.

    Cheers
    Ben

    Thread Starter nickg108

    (@nickg108)

    Thanks for your help Sensei,

    I’ve added the ID as described above as well as your code snippet. I changed position:absolute; to float:right. Is there any reason to use one over the other? They seem to look the same, and I was merely experimenting.

    Regardless, thanks for the help with solving this issue!
    Kudos on your kind, clear instructions and accuracy!

    -Nick

    Sensei

    (@wpupdateninja)

    Nick,

    If it works fine then thats fine.

    If it works its fine, position:absolute makes a much more drastic change to the elements behaviour than float, and I’m not sure a long technical explanation will do you much good.

    Let me know if you need any more help ??

    Sensei

    (@wpupdateninja)

    FYI – Im now getting a landing page on your site. is that expected?

    Thread Starter nickg108

    (@nickg108)

    Yes, I made some changes to had to change where my URL pointed. It’s all cleared up now. And I have and open post regarding changing where the Profile link in my login widjet points that is unresolved. If you’re interesting in taking a look. Here’s yet another support thread of mine.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Use php to align search box in nav?’ is closed to new replies.