Properly Align Menu Item Search Bar

  • I added my search bar to my menu navigation, by using the following code:

    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;
}

    This put the search bar directly to the right of my last menu item, with the usual spacing between menu items. I want the search bars position to be all the way to the right, with equivalent spacing from the right just as the rest of the site has going down (all the way to the right, 10 or so pixel padding).

    To do this, I altered my #search css, and added:

    margin-left: 120px;

    The number is arbitrary for the example, so ignore the value. I just want to know if this is how I would properly position my search bar, and if not, how do I go about doing this? I assume it’s wrong, as if I change the menu navigation, the length will change, which will alter the position, and it’ll need to be manually set over and over. There must be a cleaner, more automated to the theme-width way to do this.

    My site – https://www.pixelpurge.com/wordpress

    (Temp url, just for building)

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

  • Right now I’m seeing a PHP error on the site that is most likely caused due to there being blank space in your header.php file before the opening <?php tag.

    Since I can’t see the site, I’m making the assumption that your nav menu is displaying at the full width of the header, in which case I would just take that search box and float it to the right.

    Thread Starter Gemfruit

    (@gemfruit)

    I have no idea what’s causing that, and the site is loading perfectly fine for me, and a number of friends. If you could try again / isolate that issue for me, it would be much appreciated.

    As for using float right, that’s what I thought I could do, but it had no effect on the position at all.

    Ok, the site is loading fine for me now.

    The reason that the float isn’t working is because you are floating it within that list item, which is the width of the search bar, meaning there is nowhere for it to float.

    Instead, float the list item itself to the right. Add a class to the list item, like $items .= '<li class="searchbar">' . $searchform . '</li>';, then add .searchbar { float: right; } to your stylesheet.

    Thread Starter Gemfruit

    (@gemfruit)

    I understand the above logic, and thought it would work as well, but upon implementation, it didn’t work. I used my “alignright” class that already existed in my style.css, but it’s still stuck in the same position.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your alignright class is being overridden by the styles applied to:

    #nav li

    So, try using something more specific in your CSS instead:

    #nav li.alignright {
 float: right;
}

    Thread Starter Gemfruit

    (@gemfruit)

    I added the above to my style.css, then in the actual insertion of the menu item, did this:

    $items .= ‘<li class=”li.alignright”>’ . $searchform . ”;

    No luck with that; is that proper syntax on the implementation?

    This syntax is wrong <li class="li.alignright">

    But that’s a seriously problematic theme…not released under the licensing requirements of WP. You should read this:

    https://www.chipbennett.net/2010/12/10/only-download-wordpress-themes-from-trusted-sources/

    Thread Starter Gemfruit

    (@gemfruit)

    The css is in a style.css file, the implementation of setting the class is in my functions.php file, where the search bar is inserted into the navigation menu.

    As for the theme issues, I’ll have to look into them later. There are links in the footer, but that’s because I’ve yet to purchase the theme, which I’ll do upon completion of my edits to the theme. I’m not entirely sure what other issues there are that are against the wordpress agreement, but I’m sure I can easily fix them on my own, once the theme is purchased, and customized to my liking.

    It’s not released under GPL – which is not in keeping with WP policy and philosophy. These forums don’t support non-GPL products, sorry.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Properly Align Menu Item Search Bar’ is closed to new replies.