[SOLVED] How to display the search bar on all page?

[BritWeb]

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() ) { ?>

[teseo]

***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

[BritWeb]

That's great! You are a star!

Thank you!

[lithops]

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.

[teseo]

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

That's all, regards.

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

[lithops]

Hi teseo!

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

[lii240]

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

[teseo]

Hi,

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

Code: [Select]

.main-search { display: table; }
Regards

[lii240]

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;
}


[teseo]

Try putting your menu code just above this line in header.php:

Code: [Select]

<?php osc_run_hook('before-content'); ?>
Regards

[lii240]

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]

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]

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]

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]

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