Page 1 of 1

search bar in header

Posted: Wed Jan 04, 2017 6:08 pm
by Dhara1937
Hi.
I'd like the search bar in the header to move to the right. It's now loading on top of the logo area. (not good).
Here's the code from the settings/admin/header area.

Code: Select all

 
 <div class="col-sm-3">
	<form class="search" role="search" action="/search.php" method="post">
		<div class="input-group">
			<input type="text" class="form-control" placeholder="Search" name="query">
		        <div class="input-group-btn">
		        	<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
		        </div>
What can I change in this code to get the search bar to move over to the right?
Or is there somewhere else I need to look to make this adjustment?
Thanks!
Dhara

Re: search bar in header

Posted: Thu Jan 05, 2017 10:58 am
by JohnB
Glancing at this code segment, I would think probably one of two solutions would work for you here. That being said, I could give you a better answer if I could see the website.

Could you post a link to the website you are trying to move the search bar on?

In the meantime, my first instinct would be to change the columns in the bootstrap grid. This search bar is in a "col-sm-3" column, so you could play with moving where that column is in relation to the other columns in the html code.

My second thought, depending on what exactly is happening, it may be necessary to use some css code to move the search bar over to the side a bit more.

Again, I'd be happy to give a more detailed answer if you could provide me a website link!

Re: search bar in header

Posted: Mon Jan 09, 2017 3:56 pm
by Dhara1937
Hi John.
Here's what the website looks like that has a search bar out of place.
http://lovelandinsuranceagent.com/
Thanks for help on how to get it to move to the right.

Re: search bar in header

Posted: Mon Jan 09, 2017 4:19 pm
by JohnB
So here's the HTML code I saw for the header of this site:

Code: Select all

<div class="header">
			<div class="container">
				<div class="col-sm-2">
					<a href="/"><img src="/content/templates/<? print ACTIVE_TEMPLATE; ?>/images/logo.png" id="logo" alt="<? print CO_NAME; ?>"></a>
				</div>
				<!--<div class="col-sm-7">
					<h2>Representing All of Colorado for 20 years!<br>  Call Us! <? print LOCAL_PHONE.' '.TOLL_FREE ; ?></h2>
				</div>-->
				<div class="col-sm-3">
		    	<form class="search" role="search" action="/search.php" method="post">
		        <div class="input-group">
		            <input type="text" class="form-control" placeholder="Search" name="query">
		            <div class="input-group-btn">
		                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
		            </div>
		        </div>
		      </form>
				</div>
			</div>
		</div>
The easiest solution to getting the search bar moved over to the right would be to uncomment the "col-sm-7" div in the center:

Code: Select all

<!--<div class="col-sm-7">
					<h2>Representing All of Colorado for 20 years!<br>  Call Us! <? print LOCAL_PHONE.' '.TOLL_FREE ; ?></h2>
				</div>-->
That will put in the extra bootstrap column that will fill out the row, and push the search bar to the far right. If that section was commented because you do not want the content "Representing All of...." to appear, you can simply delete the content inside of the div.

Here's a link on Bootstrap Layout and Grids that can help you understand how the bootstrap columns are used, if you are unfamiliar with them.

Please let me know if you have any more questions!

Re: search bar in header

Posted: Mon Jan 09, 2017 5:03 pm
by Dhara1937
Thanks, John.
I did what you said and the search bar did float to the right but now the contact information is on top of the logo!
Can I have both a search button and contact information on the right of the header and if so, what is the code to do that, please?
Thanks.

Re: search bar in header

Posted: Mon Jan 09, 2017 5:10 pm
by JohnB
Anything you would like to appear on the far right of the header, you can place inside that las "col-sm-3" div. Since that div is the last column of the row, all it's content will appear on the far right.

Re: search bar in header

Posted: Mon Jan 09, 2017 5:51 pm
by Dhara1937
Hello again.
I couldn't figure out how to get both the search bar and the contact info inside the header, so I created a page called 'search' and added it there. But when I hid the code on the header page for the search bar, then copied it onto my new search page, the red line delineating the header from the menu and the body disappeared!
Can you please help me get that red bar back? Thanks!
http://lovelandinsuranceagent.com/Search/

Re: search bar in header

Posted: Tue Jan 10, 2017 10:35 am
by JohnB
I do not see exactly what you are reporting. I do in fact see the red line at the top, and it is a bit above the navbar and going through the logo.

When I inspect element on it, I see that there is this css:

Code: Select all

.navbar-default {
  border-top: 1px solid #f00;
  margin-top: -40px;
}
which can be found under Setting->Administrator and then clicking on Stylesheet in the Theme Editor box.

If you remove the "margin-top: -40px;" this will bring the red line back down and prevent it from running through the middle of the logo

Re: search bar in header

Posted: Tue Jan 10, 2017 11:15 am
by Dhara1937
HI John.
I did remove the margin top definition from the header and nothing happened.
The red line is still going through the logo. Any other ideas?
Thanks.

Re: search bar in header

Posted: Tue Jan 10, 2017 12:32 pm
by JohnB
This looks like it is a caching issue. Here is an article I found when searching "What is browser caching?"

https://developers.google.com/web/funda ... tp-caching

You can temporarily turn off caching by going to Settings->DNS Records, and then you should be able to see your CSS changes when you refresh the webpage. You may have to hold the shift key down while you hit refresh a few times in a row to perform a "hard refresh."

Here is a video that explains how to turn off your caching: