search bar in header

Need help? Please give a detailed explanation of your problem.
Dhara1937
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

search bar in header

Postby Dhara1937 » Wed Jan 04, 2017 6:08 pm

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
User avatar
JohnB
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: search bar in header

Postby JohnB » Thu Jan 05, 2017 10:58 am

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!
Dhara1937
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: search bar in header

Postby Dhara1937 » Mon Jan 09, 2017 3:56 pm

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.
User avatar
JohnB
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: search bar in header

Postby JohnB » Mon Jan 09, 2017 4:19 pm

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!
Dhara1937
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: search bar in header

Postby Dhara1937 » Mon Jan 09, 2017 5:03 pm

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.
User avatar
JohnB
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: search bar in header

Postby JohnB » Mon Jan 09, 2017 5:10 pm

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.
Dhara1937
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: search bar in header

Postby Dhara1937 » Mon Jan 09, 2017 5:51 pm

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/
User avatar
JohnB
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: search bar in header

Postby JohnB » Tue Jan 10, 2017 10:35 am

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
Dhara1937
Posts: 66
Joined: Wed Mar 16, 2016 1:06 pm
Website: www.webrose.net

Re: search bar in header

Postby Dhara1937 » Tue Jan 10, 2017 11:15 am

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.
User avatar
JohnB
Support Team
Posts: 1022
Joined: Wed Nov 04, 2015 3:57 pm
Website: www.allprowebtools.com

Re: search bar in header

Postby JohnB » Tue Jan 10, 2017 12:32 pm

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/fundamentals/performance/optimizing-content-efficiency/http-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:


Return to “Help / How to use AllProWebTools”



Who is online

Users browsing this forum: No registered users and 3 guests

cron