Osclass forums

Support forums => Themes => Bender => Topic started by: BritWeb on March 07, 2015, 08:47:53 pm

Title: [SOLVED] How to display the search bar on all page?
Post by: BritWeb 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() ) { ?>

Title: Re: How to display the search bar on all page?
Post by: teseo 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( 1 == 1 ) { ?>
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

Title: Re: How to display the search bar on all page?
Post by: BritWeb on March 08, 2015, 01:14:06 am

That's great! You are a star!

Thank you!

Title: Re: How to display the search bar on all page?
Post by: lithops on April 05, 2015, 09:30:23 am

Quote from: teseo on March 07, 2015, 10:25:07 pm

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( 1 == 1 ) { ?>
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. :)

Title: Re: How to display the search bar on all page?
Post by: teseo 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 (http://notepad-plus-plus.org/)), 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( 1 == 1 ) { ?>

That's all, regards.

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

Title: Re: How to display the search bar on all page?
Post by: lithops on April 05, 2015, 05:58:11 pm

Hi teseo!

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

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: lii240 on March 04, 2017, 02:37:54 am

This doesn't work on mobile or smaller screens. Any solution for that?

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: teseo 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

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: lii240 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;
}


Title: Re: [SOLVED] How to display the search bar on all page?
Post by: teseo 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

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: lii240 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?

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: lii240 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.

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: teseo 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

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: mrtsoftware 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

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: teseo 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

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: mrtsoftware on November 13, 2017, 06:21:12 pm

it did not affected even I have increased margin-top: untill 70 px
I have also tried ;
@media only screen and (max-width: 740px) {
    .main-search { margin-bottom: 70px !important; }

This also did not affected, I have cleared cache each time and checked.

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: teseo on November 13, 2017, 06:30:40 pm

Sorry, works for me here...  ???

Regards

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: mrtsoftware on November 13, 2017, 06:40:56 pm

<div class="wrapper wrapper-flash">
<h6 class="xxxx">

Under "wrapper-flash" given up, I had inserted a h6> text line ( I wrote some short informations there )

I used your code for this H6> class and now space between search-bar and  <div class="wrapper wrapper-flash"><h6 class="xxxx"> is good.

Code changed as ;
@media only screen and (max-width: 740px) {
    .xxxx { margin-top: 70px !important; }

Thank you, solved

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: mrtsoftware on January 04, 2018, 03:11:05 am

Can you also advice how to display search bar on all page for OsclassWizard Theme?
It is not same with BENDER theme and above mentioned code is not exist into Wizard Theme

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: teseo on January 04, 2018, 02:10:39 pm

Hi,

osclasswizards/header.php

Locate:

Code: [Select]

if( osc_is_home_page() ) {
if(osc_get_preference('show_banner', 'osclasswizards_theme')=='1'){
Replace with:

Code: [Select]

// if( osc_is_home_page() ) {
        if( 1 == 1 ) {
// if(osc_get_preference('show_banner', 'osclasswizards_theme')=='1'){
if(osc_is_home_page() && osc_get_preference('show_banner', 'osclasswizards_theme')=='1'){
Regards

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: mrtsoftware on January 04, 2018, 04:47:51 pm

Thank you , it works..

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: omid_firoznia on January 20, 2019, 07:29:47 pm

Quote from: teseo 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

Hi thank you. the code for desktop version work very good.

But i use the code for mobile Its in city does not work!   {  domain.com/search/city,41025/region,743227}
(i use RTL theme i put the code also in main-rtl.css but still doesn't work.

Title: Re: [SOLVED] How to display the search bar on all page?
Post by: muratbora on May 17, 2019, 01:58:14 pm

How to display search bar on item pages? Above code display also into categories / subcategories pages, too...
No need above categories / subcategories pages because it is already indicates search-sidebar.php on left side.

Item page is lack of search bar...