ZCA Bootstrap 4 Template [Support Thread]

[lat9]

I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.

<!--bof-navigation display-->
       <div id="navMainWrapper">
          <div id="navMain">
         <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
                 <ul class="dropdown-menu">
                 <li>
                    <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
                    <ul class="submenu dropdown-menu">
                           <li>
                          <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
                                          <ul class="submenu dropdown-menu">
                         <li>
                            <a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
                                             </li>
                                          </ul>
                                       </li>
                                    </ul>
                                 </li>
                             </ul>
                          </li>
                       </ul>
                    </div>
                 </nav>
              </div>
           </div>

See post #269 for a list of great links to various Bootstrap elements. Note, too, that https://w3schools.com has a bunch of "Try It" elements for Bootstrap.

[DrByte]

I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.

<!--bof-navigation display-->
       <div id="navMainWrapper">
          <div id="navMain">
         <nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav ml-auto">
              <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
                 <ul class="dropdown-menu">
                 <li>
                    <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
                    <ul class="submenu dropdown-menu">
                           <li>
                          <a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
                                          <ul class="submenu dropdown-menu">
                         <li>
                            <a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
                                             </li>
                                          </ul>
                                       </li>
                                    </ul>
                                 </li>
                             </ul>
                          </li>
                       </ul>
                    </div>
                 </nav>
              </div>
           </div>

The following seems to work, but only after adding some supporting CSS and Javascript, inspired from https://bootstrapious.com/p/bootstra...level-dropdown

<li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
   <ul class="dropdown-menu">
       <li><a class="dropdown-item">Level 1 Item 1</a></li>
       <li class="dropdown-submenu">
           <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 1 Submenu</a>
           <ul class="dropdown-menu">
               <li class="dropdown-submenu">
                  <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Level 2 Submenu</a>
                  <ul class="dropdown-menu">
                     <li>
                        <a class="dropdown-item" href="#">Level 3 Item 1</a>
                     </li>
                  </ul>
               </li>
               <li><a class="dropdown-item">Level 2 Item 2</a></li>
           </ul>
       </li>
   </ul>
</li>

stylesheet_submenu.css:

.dropdown-submenu {
  position: relative;
}


.dropdown-submenu>a:after {
  float: right;
  border: none;
   /* change the character and/or font below to suit what you have available */
  content: "\f0da";  
  font-family: 'FontAwesome';
}


.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

jscript_submenu.php

<script>
$(function() {
  // ------------------------------------------------------- //
  // Multi Level dropdowns
  // ------------------------------------------------------ //
  $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
    event.preventDefault();
    event.stopPropagation();


    $(this).siblings().toggleClass("show");




    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });


  });
});
</script>

You will probably need to tweak the CSS to increase some padding to provide indentation at subsequent levels, or add padding/margin classes to your HTML.

[Carbonless]

Looking for an assist to help code my style sheet for the ZCAtemplate to put the logo & the tagline centered in the same area. I've been able to get the tag line to go above and below the logo in mobile view, but want them to be aligned with each other in desktop view.

If you goto https://venturedesignandprint.co.uk/ you can see they have aligned the two using the bootstrap template.

I am stuck figuring out the style sheet to the same with mine.


Here is the code as I have tpl_header.php currently:

<!--bof-branding display-->
<div id="logoWrapper">
    
   <div id="logo" class="row align-items-center p-3"> 
   <?php if (HEADER_SALES_TEXT != '') {
           echo '<div class="col-sm-6">';
        } else {
            echo '<div class="col-sm-12">';
            }
            ?>
        <?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a><br>'; ?>
    </div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>    
    <div id="taglineWrapper" class="col-sm-12 text-">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline" class="text-right"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
  if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
    if ($banner->RecordCount() > 0) {
$find_banners = zen_build_banners_group(SHOW_BANNERS_GROUP_SET2);
$banner_group = 2;
?>

<div class="zca-banner bannerTwo rounded">
<?php 
if (ZCA_ACTIVATE_BANNER_TWO_CAROUSEL == 'true') {
require($template->get_template_dir('tpl_zca_banner_carousel.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_zca_banner_carousel.php'); 
} else {
echo zen_display_banner('static', $banner);
}
?>
</div>
<?php
    }
  }
?>
    </div>
<?php } 
// no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
  </div>

</div>
<!--eof-branding display-->

[dennisns7d]

Try changing your

<div id="taglineWrapper" class="col-sm-12 text-">

to

<div id="taglineWrapper" class="col-sm-6 text-right">

like the Venture site did.

[Carbonless]

Try changing your

<div id="taglineWrapper" class="col-sm-12 text-">

to

<div id="taglineWrapper" class="col-sm-6 text-right">

like the Venture site did.

THANK. YOU!
that worked.

[Carbonless]

Working on a site: www.coffeewitheinstein.com and I'm trying to enlarge the header logo
ZC 1.5.7b
php 7.3
with Shopping cart Reminder
Edit Orders
TY Package tracker
Email Export
Clone Template
ZCA Boot 4
and Order Comment Boiler plate

I've edited the includes/languages/english/mytemplate/header/php file and it isnt affecting the size of the displayed logo.

Is this controlled elsewhere by the style sheet?

[DrByte]

The div containing it is set to col-sm-4 which means it only shows at 33% width on devices other than smallest mobiles.

You can read up on Bootstrap's column grid rules at https://getbootstrap.com/docs/4.5/layout/grid/

[Carbonless]

The div containing it is set to col-sm-4 which means it only shows at 33% width on devices other than smallest mobiles.

You can read up on Bootstrap's column grid rules at https://getbootstrap.com/docs/4.5/layout/grid/

Most Excellent... My 10 year hiatus is showing its wings...

[yesaul]

just in case...

modules/bootstrap/centerboxes/fetured_products.php - line # 85

$title = '<h4 id="featuredCenterbox-card-header" class="centerBoxHeading card-header">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h4>';

[lat9]

just in case...

modules/bootstrap/centerboxes/fetured_products.php - line # 85

$title = '<h4 id="featuredCenterbox-card-header" class="centerBoxHeading card-header">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h4>';

Thanks for that! The correction will be part of v3.1.0 of the template.

Update: Tracking as part of https://github.com/lat9/ZCA-Bootstra...late/issues/31