[ronald tParticipant]

Hi great theme and support,

I was wondering if i can add an search field next to my logo above the navbar. If this is not
possible maybe i can place it in the topbar content (with shortcode or css) please advise me how to do this. I am using the integrity light theme.

Thanks Ronald

[RubinKeymaster]

Hi There,

there are already a lot of threads about this question so I would recommend using the search options to find out more about this. Here are some of the threads that might be helpful for you:

http://theme.co/x/member/forums/topic/add-search-bar-to-header/
http://theme.co/x/member/forums/topic/adding-a-search-field-in-the-navigation-menu/
http://theme.co/x/member/forums/topic/how-to-add-search-in-menu-bar/

[Steven RParticipant]

My First Post this was an issue I needed solved and messing about with core files I hate doing so I plugged this in where appropriate adding a search box to the “topbar” above the logo is pretty easy

Open Customizer
Scroll to “Header”
Scroll to widget bar I selected none because I wanted to add my own code to the top bar field if you want the widgets area to be active for social icons or other widgets make the choice necessary

Next….
scroll to Miscellaneous in the header section of customizer
check the box to enable top bar
the editor text field appears and in that box place this code

<div id="search-2" class="widget widget_search" style="width:300px; margin-top:6px; margin-bottom:-20px;">
<form method="get" id="searchform" class="form-search" action="http://www.texasroofandfence.com/newSite/">
  <label for="s" class="visually-hidden">Search</label>
  <input type="text" id="s" class="search-query" name="s" placeholder="Search" />
  <input type="submit" id="searchsubmit" class="hidden" name="submit" value="Search" />
</form></div>

As you can see Ive added an inline style to help position the search box modify this to your hearts content it naturally floats left so add float right if you want it on the right side.

and as for the support link the other topics pertain to adding search to the nav bar or logo bar or menu bar not top bar so I hope this helps the community

Top Bar customization needs serious attention but still this IS the best word press theme out there

[RadModerator]

Thank you Steven, good one! 🙂

[ronald tParticipant]

Hi Steven,

Thanks for the help, i place your code and a search field does appear the only problem is i cant search anything. When you type something it doesnt search, do i need to change something in the code. i see a name of an website in the code should i change that to my website.
Any help is appreciated.

Kind regards
Ronald

[SupportMember]

Hi Ronald,

Yes please try adding your site’s URL on that value.

Thanks!

[Darren SParticipant]

I tried adding the code supplied by Steven R but unfortunately it doesn’t work. I replaced the address with my own site but when I try to use the search box it takes me to a page saying that the page I was looking for is no longer here and it has this in the web address bar at the top of the browser:

http://veganfitness.co.uk/veganfitness.co.uk/?s=walnut&submit=Search

Should it have my domain name twice?

Thanks!
Darren

[SupportMember]

Hey Darren,

Please make sure you code looks like the following:

<div id="search-2" class="widget widget_search" style="width:300px; margin-top:6px; margin-bottom:-20px;">
<form method="get" id="searchform" class="form-search" action="http://veganfitness.co.uk/">
  <label for="s" class="visually-hidden">Search</label>
  <input type="text" id="s" class="search-query" name="s" placeholder="Search" />
  <input type="submit" id="searchsubmit" class="hidden" name="submit" value="Search" />
</form></div>

Cheers.

[Darren SParticipant]

Thanks Support! I just had to change the top margin to 1px and the bottom margin to 50px to get it to look right. On paper that sounds like it will make it look strange but for some reason it displays correctly on chrome and firefox!

[RadModerator]

Great to hear that Darren! You’re welcome 🙂

[Marco vParticipant]

Is it possible to make the width of the searchbox (positioned in this way) 3 columns of the bootstrap grid? Do I just add the bootsrap classes?

[ChristopherModerator]

Hi there,

You can increase or decrease the width of search box in code above by changing width value in first line.

Thank you.

[pathfindersrcdParticipant]

Hello,

I have added the following code:

<div id=”search-2″ class=”widget widget_search” style=”float:right” style=”width:300px; margin-top:10px; margin-bottom:-20px;”>
<form method=”get” id=”searchform” class=”form-search” action=”http://pathfinders.flywheelsites.com/”>
<label for=”s” class=”visually-hidden”>Search</label>
<input type=”text” id=”s” class=”search-query” name=”s” placeholder=”Search” />
<input type=”submit” id=”searchsubmit” class=”hidden” name=”submit” value=”Search” />
</form></div>

But cannot seem to get the search bar to come down from the browser. I tried adding margin-top and padding-top but didn’t get any results.

Can you help?

[pathfindersrcdParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

You could try adding this in your customizer’s custom CSS:

#search-2 .widget_search{
margin-top:5px;
}

Let us know how it goes.

Thanks.

[Author]

Posts