CODEWITHSUNDEEP
htmlcsswordpress
Javacadabra
Javacadabra

Reputation: 5758

Positioning search form in wordpress navigation menu

Hi guys I am trying to position a search box in my navigation menu of my wordpress site. I have managed to get it displaying in the menu using a plugin called Search Box Navigation. This plugin enables me to style the box to suit my needs.

However this is where I am running into issues.

The code responsible for generating the box located in a plugin file: (I added a class to the li in an effort to control how it would appear on the site...

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 class="menusearch">' . $searchform . '</li>';

    return $items;
}
?>

This is my navigation html:

<nav id="access" role="navigation">
        <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            <div class="menu">
                <ul id="prime_nav" class="menu"><li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://#.com"><span>Item 1</span></a></li>
                    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><a href="http://#.com"><span>Item 2</span></a>
                    <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="http://#.com"><span>Item 3</span></a></li>
                    <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://#.com"><span>Item 4</span></a></li>
                    <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://incomebrokers.tld/93-2/"><span>Test</span></a></li>
                    <li class="menusearch"> 
                            <form method="get" id="searchform" action="http://incomebrokers.tld//">
                                <input type="text" value="Search"/>
                                <input type="submit" id="searchsubmit" value="Search" />
                            </form>
                    </li>
                </ul>
            </div>                            
    </nav>

This is my css

#access ul li {
position:relative;
display:block;
float:left;
text-align: center;
width:100px;
white-space: nowrap;
}


/*Menu Search Class*/
.menusearch{
    margin-left:500px;
}

any help on how I can position this box to the far right of the navigation but have it adjust when the browser is smaller in size?

Upvotes: 0

Views: 1254

Answers (1)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

I noticed that the same width(100px) is set for each li of the nav.

What about if you edit the css and you add: 

#access ul li {
position:relative;
display:block;
float:left;
text-align: center;
width:100px;
white-space: nowrap;
}
#access ul li:last-child {
float:right;
width:300px;
}

http://jsfiddle.net/mBBJM/4537/

You could make it fluid and setting the width in % with a different percentage for the li of the nav that might need it.

Upvotes: 1

Related Questions