Jump to content

Recommended Posts

I am trying to modify the navbar so it looks like the image I have attached, all good so far apart from the search and cart only open when I click the icons in sequence from right to left.

 

Simpy put the navs do not open and close correctly.

 

http://s19.postimg.org/pw3c28mgz/Screenshot_9.png

<nav class="navbar navbar-default navbar-no-corners navbar-no-margin" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">

      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-align-justify"></span>
      </button>

      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-2">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-search"></span>
      </button>

      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-3">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-shopping-cart"></span>
      </button>

      <a class="hidden-lg navbar-brand" href="#"><?php echo '<a href="' . tep_href_link('index.php') . '">' . tep_image(DIR_WS_IMAGES . STORE_LOGO, STORE_NAME) . '</a>'; ?></a>

    </div>

    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav">
          <?php echo '<li><a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . HEADER_WHATS_NEW . '</a></li>'; ?>
          <?php echo '<li><a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . HEADER_SPECIALS . '</a></li>'; ?>
          <?php echo '<li><a href="' . tep_href_link(FILENAME_REVIEWS) . '">' . HEADER_REVIEWS . '</a></li>'; ?>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo (tep_session_is_registered('customer_id')) ? sprintf(HEADER_ACCOUNT_LOGGED_IN, $customer_first_name) : HEADER_ACCOUNT_LOGGED_OUT; ?></a>
            <ul class="dropdown-menu">
              <?php
              if (tep_session_is_registered('customer_id')) {
                echo '<li><a href="' . tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' . HEADER_ACCOUNT_LOGOFF . '</a>';
              }
              else {
                 echo '<li><a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' . HEADER_ACCOUNT_LOGIN . '</a>';
                 echo '<li><a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . HEADER_ACCOUNT_REGISTER . '</a>';
              }
              ?>
              <li class="divider"></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . HEADER_ACCOUNT . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_HISTORY, '', 'SSL') . '">' . HEADER_ACCOUNT_HISTORY . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ADDRESS_BOOK, '', 'SSL') . '">' . HEADER_ACCOUNT_ADDRESS_BOOK . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_PASSWORD, '', 'SSL') . '">' . HEADER_ACCOUNT_PASSWORD . '</a>'; ?></li>
            </ul>
          </li>
        </ul>
      </div>

     <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav navbar-right">
         <?php
              $search_box = '<div class="searchbox-margin">';
		      $search_box .= tep_draw_form('quick_find', tep_href_link('advanced_search_result.php', '', $request_type, false), 'get', 'class="form-horizontal"');
		      $search_box .= '  <div class="input-group">' .
		                          tep_draw_input_field('keywords', '', 'required placeholder="' . TEXT_SEARCH_PLACEHOLDER . '"') . '<span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="glyphicon glyphicon-search"></i></button></span>' .
		                      '  </div>';
		      $search_box .= '</div>';
		      $search_box .=  tep_hide_session_id() . '</form>';
          ?>
              <li><?php echo $search_box; ?></li>
            </ul>
          </li>
        </ul>
      </div>

     <div class="collapse navbar-collapse" id="bs-navbar-collapse-3">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav navbar-right">
          <?php
          if ($cart->count_contents() > 0) {
            ?>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo sprintf(HEADER_CART_CONTENTS, $cart->count_contents()); ?></a>
              <ul class="dropdown-menu">
                <li><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . sprintf(HEADER_CART_HAS_CONTENTS, $cart->count_contents(), $currencies->format($cart->show_total())) . '</a>'; ?></li>
                <?php
                if ($cart->count_contents() > 0) {
                  echo '<li class="divider"></li>';
                  echo '<li><a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . HEADER_CART_VIEW_CART . '</a></li>';
                }
                ?>
              </ul>
            </li>
            <?php
            echo '<li><a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . HEADER_CART_CHECKOUT . '</a></li>';
          }
          else {
            echo '<li class="nav navbar-text">' . HEADER_CART_NO_CONTENTS . '</li>';
          }
          ?>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

I can see what you're attempting to do, and it's a cool idea.  The problems as I see them (note this is a quick glance, no in-depth at all);

 

1.  you have some bits of broken markup

=> what looks like an extra li and ul in each bs-navbar-collapse section

 

2.  the bs-navbar-collapse-3 is inside the bs-navbar-collapse-2 which is inside the bs-navbar-collapse-1

=> 3 will only work is both 1 and 2 are open

=> 2 will only work if 1 is open


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Try:

 

 

<nav class="navbar navbar-default navbar-no-corners navbar-no-margin" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
 
      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-align-justify"></span>
      </button>
 
      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-2">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-search"></span>
      </button>
 
      <button type="button" class="btn-icon navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-3">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="fa fa-shopping-cart"></span>
      </button>
 
      <a class="hidden-lg navbar-brand" href="#"><?php echo '<a href="' . tep_href_link('index.php') . '">' . tep_image(DIR_WS_IMAGES . STORE_LOGO, STORE_NAME) . '</a>'; ?></a>
 
    </div>
 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav">
          <?php echo '<li><a href="' . tep_href_link(FILENAME_PRODUCTS_NEW) . '">' . HEADER_WHATS_NEW . '</a></li>'; ?>
          <?php echo '<li><a href="' . tep_href_link(FILENAME_SPECIALS) . '">' . HEADER_SPECIALS . '</a></li>'; ?>
          <?php echo '<li><a href="' . tep_href_link(FILENAME_REVIEWS) . '">' . HEADER_REVIEWS . '</a></li>'; ?>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo (tep_session_is_registered('customer_id')) ? sprintf(HEADER_ACCOUNT_LOGGED_IN, $customer_first_name) : HEADER_ACCOUNT_LOGGED_OUT; ?></a>
            <ul class="dropdown-menu">
              <?php
              if (tep_session_is_registered('customer_id')) {
                echo '<li><a href="' . tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' . HEADER_ACCOUNT_LOGOFF . '</a>';
              }
              else {
                 echo '<li><a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' . HEADER_ACCOUNT_LOGIN . '</a>';
                 echo '<li><a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . HEADER_ACCOUNT_REGISTER . '</a>';
              }
              ?>
              <li class="divider"></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . HEADER_ACCOUNT . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_HISTORY, '', 'SSL') . '">' . HEADER_ACCOUNT_HISTORY . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ADDRESS_BOOK, '', 'SSL') . '">' . HEADER_ACCOUNT_ADDRESS_BOOK . '</a>'; ?></li>
              <li><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT_PASSWORD, '', 'SSL') . '">' . HEADER_ACCOUNT_PASSWORD . '</a>'; ?></li>
            </ul>
          </li>
        </ul>
      </div>      
    </div>
    
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav navbar-right">
          <?php
          $search_box = '<div class="searchbox-margin">';
     $search_box .= tep_draw_form('quick_find', tep_href_link('advanced_search_result.php', '', $request_type, false), 'get', 'class="form-horizontal"');
     $search_box .= '  <div class="input-group">' .
                         tep_draw_input_field('keywords', '', 'required placeholder="' . TEXT_SEARCH_PLACEHOLDER . '"') . '<span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="glyphicon glyphicon-search"></i></button></span>' .
                     '  </div>';
     $search_box .= '</div>';
     $search_box .=  tep_hide_session_id() . '</form>';
          ?>
          <li><?php echo $search_box; ?></li>
        </ul>
      </div>
    </div>
      
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-3">
      <div class="container-fluid hidden-lg">
        <ul class="nav navbar-nav navbar-right">
          <?php
          if ($cart->count_contents() > 0) {
            ?>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo sprintf(HEADER_CART_CONTENTS, $cart->count_contents()); ?></a>
              <ul class="dropdown-menu">
                <li><?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . sprintf(HEADER_CART_HAS_CONTENTS, $cart->count_contents(), $currencies->format($cart->show_total())) . '</a>'; ?></li>
                <?php
                if ($cart->count_contents() > 0) {
                  echo '<li class="divider"></li>';
                  echo '<li><a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . HEADER_CART_VIEW_CART . '</a></li>';
                }
                ?>
              </ul>
            </li>
            <?php
            echo '<li><a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . HEADER_CART_CHECKOUT . '</a></li>';
          }
          else {
            echo '<li class="nav navbar-text">' . HEADER_CART_NO_CONTENTS . '</li>';
          }
          ?>
        </ul>
      </div>
    </div>      
  </div>
</nav>

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

@@burt

 

thats better but if I click on the shopping cart and then immediately the search icon the search box is loaded on top of the shopping cart.

 

I was thinking that the shopping cart should close before opening the search box

 

if that makes sense (w00t)


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

What makes more sense to me ... 

 

I click "A" button, the "A" content opens.

I click "B" button, the "B" content opens.

I now click "A" button, the "A" content closes.

 

 

Some .js would do what you want, someone must have already made such.

If not, should be simple enough for you to handle.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

What makes more sense to me ... 

 

I click "A" button, the "A" content opens.

I click "B" button, the "B" content opens.

I now click "A" button, the "A" content closes.

 

 

Some .js would do what you want, someone must have already made such.

If not, should be simple enough for you to handle.

 

@@burt

 

now I see that a different way

 

I click "A" button, the 'A' content opens.

I click "B" button, the "A" content closes and the "B" content opens.

 

personal taste I suppose

 

back to google for the .js :-


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

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

×