How to insert "Search" into the theme

[Smart19]

Is there an example somewhere on how to insert a “search field” permanently into the theme?

Something like this: https://www.livemeshthemes.com/agile/filterable-portfolio/whereisthesearchbutton
but permanent on the lets say upper right corner on all the pages.

Thank you!

[Smart19]

Further info: When I insert the “Search” trough a “widgets –> header area”, the layout is pretty messed up.

[Raghavendra]

Pls post the link as a private message and I will do my best to help on styling the same. We just need some custom CSS for the same.

[Smart19]

This reply has been marked as private.

[Veena]

Pls try the following Custom CSS in Theme Options –

#sidebar-header {
position: relative;
right: -80px;
top: 30px;
z-index: 1;
}

#site-logo a img {
padding-top: 35px;
}

[Smart19]

This reply has been marked as private.

[Veena]

Pls insert the following lines of code in header.php in line no:86

<div class=”search-wrap”>
<aside id=”search-4″ class=”widget widget_search widget-widget_search”>
<div class=”widget-wrap widget-inside”>
<div class=”search”>
<form method=”get” id=”search-form” class=”search-form” action=”http://www.bs-nova.de/”&gt;
<input type=”text” class=”search-text” name=”s” id=”s” placeholder=”Suche”>
<input type=”submit” class=”submit” name=”submit” id=”searchsubmit” value=””>
</form>
</div>
</div>
</aside>
</div>
Pls remove the float right property of primary menu and add the following Custom CSS in themeoptions –
.search-wrap {
clear: both;
display: inline-block;
float: right
}

It should help the work.

[Smart19]

This reply has been marked as private.

[Veena]

While inspecting element i get to know that still the form code is not in the right place also the styling is still not affected.
Before itself you might have changed header.php i guess.

Pls insert the code(form code that i have suggested before) immediately after the following line in header.php.

get_template_part(‘menu’, ‘primary’); // Loads the menu-primary.php template.
?>

And also dont forget to remove or comment float right property of primary menu in style.css – because then only the search box will occupy in the same row as of primary menu.

And add the following custom CSS in theme options –

.search-wrap {
clear: both;
display: inline-block;
float: right
}

Pls give a try and let me know.

[Smart19]

ok, I changed all of the above. thank you

And I changed this in the main.css:

/* Primary menu styling*/
#primary-menu {
padding: 0;
position: relative;
right: 0;
bottom: 0;
display: inline-block;
float: right; }

to

/* Primary menu styling*/
#primary-menu {
padding: 0;
position: relative;
right: 0;
bottom: 0;
display: inline-block;
}

Still no good result… 🙁

[Veena]

Please update header.php file with code in Code snippet.png (line 85 – 99)

insert-code-here.png shows(marked with red arrow) the exact location in the file where you need to paste above code.

Your final code should look as in actual-code.png

Also include following Custom CSS in themeoptions –

.search-wrap {
clear: both;
display: inline-block;
float: right
}

If its not working after making changes, then please share your header.php and custom.css file.

[Smart19]

This reply has been marked as private.

[Smart19]

This reply has been marked as private.

[Veena]

This reply has been marked as private.

[Smart19]

This reply has been marked as private.

[Author]

Posts