Jump to content
piernas

Navbar button shown in small view - how to?

Recommended Posts

If I use the:

includes > modules > navbar_extra_modules > templates > nbx_search_button file from "navbar extra 1.1"

it then displays the search bar in the header when displaying in mobile...

Do you see any problem with using this:

<?php

  $button = '      <button type="button" id="btn-search" class="btn-primary navbar-toggle"  data-toggle="collapse" data-target="#navbar-extra-collapse-search">
        <span class="sr-only">MODULE_NAVBAR_EXTRA_SEARCH_BUTTON_SCREENREADER_TEXT</span>
        <span class="fa fa-search"></span>
      </button>
';

  $collapsible_menu = '    <div class="collapse navbar-collapse navbar-right" id="navbar-extra-collapse-search">
        <ul class="nav navbar-nav navbar-right hide-expanded">
          <li>
            <div class="searchbox-margin">' . tep_draw_form("quick_find", tep_href_link("advanced_search_result.php", "", $request_type, false), "get")  . '
              <div class="input-group">
              <input type="text" name="keywords"  required placeholder="' . TEXT_SEARCH_PLACEHOLDER . '" class="form-control" />
              <span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="fa fa-search"></i></button></span>
              </div>
            </form>
            </div>
          </li>
        </ul>
    </div>
';
 //            <form name="quick_find" action="https://hobbycrash.com/_0000/advanced_search_result.php" method="get" class="form-horizontal searchbox-width">

Instead of this:

<?php

  $button = '      <button type="button" id="btn-search" class="btn-primary navbar-toggle"  data-toggle="collapse" data-target="#navbar-extra-collapse-search">
        <span class="sr-only">MODULE_NAVBAR_EXTRA_SEARCH_BUTTON_SCREENREADER_TEXT</span>
        <span class="fa fa-search"></span>
      </button>
';

  $collapsible_menu = '    <div class="collapse navbar-collapse navbar-right" id="navbar-extra-collapse-search">
        <ul class="nav navbar-nav navbar-right hide-expanded">
          <li>
          <span id="search-placeholder"></span>
          </li>
        </ul>
    </div>';

$jscript = '<script>
  function ChangeDiv(width){
    if (width <= 767) {
        $(".searchbox-margin").appendTo($("#search-placeholder"));
        $(".searchbox-margin").css({"margin-left":"10px", "margin-right":"10px"});
    } else {
        $(".searchbox-margin").appendTo($(".search"));
        $(".searchbox-margin").css({"margin-left":"", "margin-right":""});

    }
  }

  $(function () {
      var onLoadWidth = $(window).width();
      ChangeDiv(onLoadWidth);
        $(window).resize(function () {
          var resizeWidth = $(window).width();
          if (onLoadWidth !== resizeWidth) {
            ChangeDiv(resizeWidth);
            onLoadWidth= resizeWidth;
          }
        });
  })
</script>';

$oscTemplate->addBlock($jscript, 'footer_scripts');

 

Share this post


Link to post
Share on other sites
10 hours ago, Bobber said:

For some reason the search box is no being displayed in the header under the logo after this update... in mobile display.

Are you seeing that too @piernas???

I made it to hide the search bar in mobile view so it's only seen when you press the search button. Is this the way it works for you?

Share this post


Link to post
Share on other sites
12 minutes ago, piernas said:

@discxpress have you enabled the new navigation bar under content modules->navigation bar?

Thanks! I like this module. When I set the navbar to float the screen is able to move side to side like something is too big for the screen. This only on desktop.

Share this post


Link to post
Share on other sites
3 minutes ago, piernas said:

@discxpress can you post aa screenshot of the issue? Does everything else work fine?

I can't screenshot it. It's the scrollbar that appear at the bottom of the browser that moves left to right. 

It works just fine

Share this post


Link to post
Share on other sites
1 minute ago, piernas said:

@discxpress I can't replicate it - don't have a bottom scrollbar on my test site

Thanks anyway. It works fine in mobile which is where most of my traffic comes from.

Share this post


Link to post
Share on other sites
On 12/1/2017 at 11:28 PM, piernas said:

@Bobber I mean - is it working that way in the zip I uploaded or it's failing?

Hi @piernas Yes It Is Unzipping the proper way which you discribed!

Thank You For Your Help And The Update!!!

This Is Easily The Best Mobile Update Available For OsCommerce!!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×