Advertisement:

Author Topic: [SOLVED] How to display the search bar on all page?  (Read 4885 times)

BritWeb

  • Hero Member
  • *****
  • Posts: 770
  • If it ain't broke, don't fix it.
[SOLVED] How to display the search bar on all page?
« on: March 07, 2015, 08:47:53 pm »
Hi

Can someone point me in the right direction as how to display the search bar on all page rather than only on home page, static page and contact pages?

Thanks!

Code: [Select]
<?php if(osc_is_home_page() || osc_is_static_page() || osc_is_contact_page() ) { ?>
« Last Edit: April 06, 2015, 03:33:34 pm by BritWeb »

teseo

  • Hero Member
  • *****
  • Posts: 6169
Re: How to display the search bar on all page?
« Reply #1 on: March 07, 2015, 10:25:07 pm »
***CORRECTED*** (also for Mobile view)

Hi,

1.- That line on header.php, replace it with:

Code: [Select]
<!--    --><?php //if( osc_is_home_page() || osc_is_static_page() || osc_is_contact_page() ) { ?>
    <?php if( == ) { ?>

2.- To show it also on Mobile view, add this at the bottom of your bender/css/main.css:

Code: [Select]
.main-search { display: table; }
Quick and dirty, but it should work.  ::)

Regards
« Last Edit: March 04, 2017, 01:52:33 pm by teseo »

BritWeb

  • Hero Member
  • *****
  • Posts: 770
  • If it ain't broke, don't fix it.
Re: How to display the search bar on all page?
« Reply #2 on: March 08, 2015, 01:14:06 am »
That's great! You are a star!

Thank you!

lithops

  • Newbie
  • *
  • Posts: 24
Re: How to display the search bar on all page?
« Reply #3 on: April 05, 2015, 09:30:23 am »
Hi,

Very easily, that line on header.php, replace it with:

Code: [Select]
<!--    --><?php //if( osc_is_home_page() || osc_is_static_page() || osc_is_contact_page() ) { ?>
    <?php if( == ) { ?>

Quick and dirty, but it should work.  ::)

Regards

Hello teseo,

I would like to do this on my site also, but am not sure where to paste this code or what code I need to replace. Can you please explain in detail? I am using the bender 3.0.1 by Osclass theme. Thanking you. :)

teseo

  • Hero Member
  • *****
  • Posts: 6169
Re: How to display the search bar on all page?
« Reply #4 on: April 05, 2015, 01:45:36 pm »
Hi,

oc-content/themes/bender/header.php

Use a good text editor (not Word or Windows Notepad, download Notepad++ here), replace line 65:

Code: [Select]
    <?php if( osc_is_home_page() || osc_is_static_page() || osc_is_contact_page() ) { ?>

with

Code: [Select]
<!--    --><?php //if( osc_is_home_page() || osc_is_static_page() || osc_is_contact_page() ) { ?>
    <?php if( == ) { ?>

That's all, regards.

PS.- BTW @BritWeb, please add [SOLVED] to the title of this thread.

lithops

  • Newbie
  • *
  • Posts: 24
Re: How to display the search bar on all page?
« Reply #5 on: April 05, 2015, 05:58:11 pm »
Hi teseo!

You are amazing! It worked like a charm. Thank you very much!  :D

lii240

  • Newbie
  • *
  • Posts: 47
Re: [SOLVED] How to display the search bar on all page?
« Reply #6 on: March 04, 2017, 02:37:54 am »
This doesn't work on mobile or smaller screens. Any solution for that?

teseo

  • Hero Member
  • *****
  • Posts: 6169
Re: [SOLVED] How to display the search bar on all page?
« Reply #7 on: March 04, 2017, 01:49:54 pm »
Hi,

Add this at the bottom of your bender/css/main.css:

Code: [Select]
.main-search { display: table; }
Regards

lii240

  • Newbie
  • *
  • Posts: 47
Re: [SOLVED] How to display the search bar on all page?
« Reply #8 on: March 06, 2017, 01:52:26 am »
Hi teseo - once again thanks for your help.

This indeed worked however the search bar is now hiding the custom menu i added to my website (please see images attached). I'm quite poor with css and was wondering if there is there any chance you could help me fix this? If so thanks, I have pasted the code below.

Here is the css code for my custom menu
Code: [Select]
/* =Nav
-------------------------------------------------------------- */
#nav-trigger {
  margin: -21px -10px;
  padding-top:2px;
  margin-bottom:-15px;
  display: none;
  text-align: left;
  background-color: #ECE9E9;
 }
  #nav-trigger span {
    display: inline-block;
    height:20px;
    padding: 6px 7px;
    background-color: #ECE9E9;
    color: #312F2F;
    cursor: pointer;
    }
    #nav-trigger span:after {
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 4px;
      content: "";
      border-left: none;
      border-top: solid 5px #312F2F;
      border-bottom: solid 5px #312F2F;
      border-right: none; //solid 10px transparent
      }
    #nav-trigger span:hover {
      background-color: #ECE9E9;
      color: none; }
    #nav-trigger span.open:after {
      border-left: none;
      border-top: solid 5px #312F2F;
      border-bottom: solid 5px #312F2F;
      border-right: none; }

nav {
  margin-bottom: 30px;
  font-size: 15px;
  }

nav#nav-main {
  background-color: #ECE9E9;
  padding-top: 3px;
  }
  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: none; }
  nav#nav-main li {
    display: inline-block;
    border-right: none;
    padding: 0 0px; }
    nav#nav-main li:last-child {
      border-right: none; }
  nav#nav-main a {
    text-decoration: none;
    display: block;
    color: black;
    padding: 10px 30px; }
    nav#nav-main a:hover {
      background-color: #45b862;
      color: #fff; }

nav#nav-mobile {
  position: relative;
  display: none;
  z-index: 9;
  }
  nav#nav-mobile ul {
    display: none;
    font-size: 0.8em;
    font-family: "Tahoma", Georgia, Times, serif;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: -50px;
    margin-right: auto;
    text-align: left;
    background-color: #312F2F; }
  nav#nav-mobile li {
    display: block;
    height:30px;
    padding: 5px 0;
    margin: 0 5px;
    border-bottom: none; }
    nav#nav-mobile li:last-child {
      border-bottom: none; }
  nav#nav-mobile a {
    text-decoration:none;
    display: block;
    color: white;
    padding: 10px 20px; }
    nav#nav-mobile a:hover {
      background-color: #ECE9E9;
      color: #312F2F; }

/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
  #nav-trigger {
    display: block; }

  nav#nav-main {
    display: none; }

  nav#nav-mobile {
    display: block; }
}

here is the menu code in my header.php file
Code: [Select]
<nav id="nav-main">
           <ul>
              <li> <a href="index.php?page=search&sCategory=4"><?php  _e("Rooms","bender_black");?></a> </li>
              <li> <a href="index.php?page=search&sCategory=6"><?php  _e("Electronics","bender_black");?></a></li>
              <li> <a href="index.php?page=search&sCategory=2"><?php  _e("Vehicles","bender_black");?></a></li>
              <li> <a href="index.php?page=search&sCategory=3"><?php  _e("Books","bender_black");?></a></li>
              <li> <a href="index.php?page=search&sCategory=8"><?php  _e("Clothes","bender_black");?></a></li>
              <li> <a href="index.php?page=search&sCategory=5"><?php  _e("Services","bender_black");?></a></li>
              <li> <a href="index.php?page=search&sCategory=1"><?php  _e("General","bender_black");?></a></li>
          </ul>
       </nav>
       <div id="nav-trigger">
         <span><?php  _e("Categories","bender_black");?></span>
       </div>
       <nav id="nav-mobile"></nav>

and here is the line you told me to add to make the search bar appear on all mobile pages
Code: [Select]
.main-search { 
    display: table;
}
« Last Edit: March 06, 2017, 01:54:16 am by lii240 »

teseo

  • Hero Member
  • *****
  • Posts: 6169
Re: [SOLVED] How to display the search bar on all page?
« Reply #9 on: March 06, 2017, 01:27:12 pm »
Try putting your menu code just above this line in header.php:

Code: [Select]
<?php osc_run_hook('before-content'); ?>
Regards

lii240

  • Newbie
  • *
  • Posts: 47
Re: [SOLVED] How to display the search bar on all page?
« Reply #10 on: March 06, 2017, 10:54:43 pm »
Hi teseo - still no luck. I would have thought this is a css issues however why would the menu show correctly on the main page but not on other pages?

lii240

  • Newbie
  • *
  • Posts: 47
Re: [SOLVED] How to display the search bar on all page?
« Reply #11 on: March 07, 2017, 03:44:09 am »
hi all / teseo - I have a better idea and would rather have the header (plus search bar) show as it does on the contact page (please see image). I would like to have it like that on all pages except the index page.

I've tried copying the code in the contact page
Code: [Select]
    bender_black_add_body_class('contact');
    osc_enqueue_script('jquery-validate');
    osc_current_web_theme_path('header.php');
However that didn't work.


teseo

  • Hero Member
  • *****
  • Posts: 6169
Re: [SOLVED] How to display the search bar on all page?
« Reply #12 on: March 07, 2017, 06:05:55 pm »
Sorry I can't help you with that. For the subject of this thread, I think this should work, maybe other elements you have included are messing with it... ???

Regards

mrtsoftware

  • Sr. Member
  • ****
  • Posts: 343
Re: [SOLVED] How to display the search bar on all page?
« Reply #13 on: November 13, 2017, 05:07:25 pm »
I have done as teseo explained,
Search bar shown into all pages but for mobile devices there is view problem,
search bar is drooping / closing on " breadcrump " bar. How to make distance between search bar and breadcrump line for mobile devices?

How to solve this view / secreen problem?

Please see secreenshoot

teseo

  • Hero Member
  • *****
  • Posts: 6169
Re: [SOLVED] How to display the search bar on all page?
« Reply #14 on: November 13, 2017, 05:32:16 pm »
Hi,

Add this at the bottom of your bender/css/main.css:

Code: [Select]
@media only screen and (max-width: 740px) {
    .breadcrumb { margin-top: 35px !important; }
}

Go changing the value for margin-top until you're satisfied with the look of it.

Regards