PupStar Posted November 29, 2015 Share Posted November 29, 2015 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> Link to comment Share on other sites More sharing options...
burt Posted November 29, 2015 Share Posted November 29, 2015 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 Link to comment Share on other sites More sharing options...
burt Posted November 29, 2015 Share Posted November 29, 2015 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> Link to comment Share on other sites More sharing options...
PupStar Posted November 29, 2015 Author Share Posted November 29, 2015 @@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) Link to comment Share on other sites More sharing options...
burt Posted November 29, 2015 Share Posted November 29, 2015 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. Link to comment Share on other sites More sharing options...
PupStar Posted November 29, 2015 Author Share Posted November 29, 2015 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 :- Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.