Help moving the search bar

  • Hello everyone,
    This is my website: https://www.animes.co.il/site
    I tried to move the search bar into the nav content but it starts a new line. I tried to play with the code and the searchbar and nav CSS but nothing solved it. Can you please help with that? here is the nav content code:

    <div id="nav-content" class="clearfix">

		<ul class="sf-menu menu clearfix">

<li><a href="">???? ????</a></li>
<li><a href="">???????</a></li>
<li><a href="">???? ????</a></li>
<li><a href="">??????</a></li>
<li><a href="">??? ???</a></li>

</ul>

	<?php arras_beside_nav() ?>
	<div id="searchbar"><?php get_search_form() ?></div>

	</div>

    searchbar css code:

    /* search bar */

#searchbar				{ float: left; overflow: hidden; margin: 25px 0 0; }

.searchform				{ margin: 0; }

.searchform .s			{ font-family: Helvetica, Arial, sans-serif; font-size: 14px; border: 1px solid #CCC; background: #FFF; padding: 5px 3px 4px; margin: 1px 0 0 5px; float: right; width: 250px; }

.searchform .searchsubmit { float: right; cursor: pointer; border: 1px solid #333; background: url(../../images/postbar-black.gif) repeat-x; color: #FFF; }

.searchform .searchsubmit:hover { background: #FFF; color: #383332; }

    Thanks in advance ??

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

  • The class=”clearfix” typically has the css clear:both in it.

    Clear both means that it will not allow anything on either side of the element.

    So ul will not allow anything beside it.

    Two things to try, the 2nd one might be easier:

    1)
    Try moving the search bar inside the ul container, like this:

    <div id="nav-content" class="clearfix">

		<ul class="sf-menu menu clearfix">

<li><a href="">???? ????</a></li>
<li><a href="">???????</a></li>
<li><a href="">???? ????</a></li>
<li><a href="">??????</a></li>
<li><a href="">??? ???</a></li>

	<?php arras_beside_nav() ?>
	<div id="searchbar"><?php get_search_form()?>

</ul>
</div>

	</div>

    You may need to enclose the search bar in

    <li> and </li>

    2)
    You can also overide the clearfix css of the ul by something like:

    ul .clearfix {
clear: none;
}

    Thread Starter -Kate-

    (@-kate-)

    I’ve tired things like that before as well as I tried this now. Nope, it doesn’t work. It seems to be less simple than that.

    Try removing the top margin here:

    #searchbar {
    float: left;
    margin: 25px 0 0;
    overflow: hidden;
}

    Thread Starter -Kate-

    (@-kate-)

    Solved it. Thanks you WPyogi :). Though, I tried it before but I guess it’s tricky to use the style css instead of the child theme which simply rides over it and not confuse you with many many similar files. ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help moving the search bar’ is closed to new replies.