ZCA Bootstrap 4 Template [Support Thread]

[nicksab]

Hello everyone,

I am back with another question ( sorry ).

I would like to replace the store logo by having the store name center inside of the navbar on the right side of the hamburger.

Here is where i am at:

I managed to remove the store logo on small screen but no luck with the store name. I tried a few things but it messes the layout .


I would like the navbar to read as follow on small screen ( no logo displayed)

hamburger ------ store name with home link ------- search glass ( if possible instead of in the collapse menu)

Anyone has done something like that ? or can help me please?

The site is at https://www.royal-fleur.com/upgrade

Thank you in advance for your much appreciated assistance

[dbltoe]

Little bit too much in the change department to be able to help. Can't see all the changes you've made in files.

A home link should always be seen in the mobile if not changed.

You should not see two search icons on a desktop and when you click on the hamburger.

Can you take a look at https://www.jeandretDOTcom/index.php?t=ADA_Boot3_3 and let us know what you need different?

[nicksab]

Little bit too much in the change department to be able to help. Can't see all the changes you've made in files.

A home link should always be seen in the mobile if not changed.

You should not see two search icons on a desktop and when you click on the hamburger.

Can you take a look at https://www.jeandretDOTcom/index.php?t=ADA_Boot3_3 and let us know what you need different?

Thank you dbltoe for the link. What i am trying to achieve is a bit different.

Sorry about the 2 search icons. I was trying a few things with the following file bootstrap/common/template_header.php.

The look I am trying to achieve is similar to this site https://rafaelflorist.com/ on mobile.



Basically, the logo ( zen cart or else) as seen on desktop disappear on small and medium screen. When the logo is not shown, it is replace by the store name in the navbar ( linkable if possible ). The navbar on mobile looks really blank/dull on my site

As for the search icon, it would be great if it would always be in the top right corner ( right side of navbar) no matter the screen size. The search icon in the hamburger could be remove so it is not being duplicated.

Sorry for the long post and for the no so clear explanation. I understand i am asking for a lot with this and would understand if it is not possible to accomplish.

Thank you for your time and advice

[nicksab]

I got to display as close as i can get it to what i want.

Here is my tpl_header.php code:

<?php
/**
 * Common Template - tpl_header.php
 * 
 * BOOTSTRAP v3.1.2
 *
 *
 * @copyright Copyright 2003-2020 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: DrByte 2020 May 19 Modified in v1.5.7 $
 */
?>
<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper" class="mt-5">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">

<nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">

  
  <button class="navbar-toggler" style="color:#333;" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-bars"></i>
  </button>
  
<div class="d-md-none">
 <a class="navbar-brand" style="color:#fff;  font-family:auto; font-size:1.5rem;" href="">Royal Fleur Florist</a>   
	  	
	</div>
	
	  
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
<?php if (!$this_is_home_page) { ?>        
      <li class="nav-item">
        <?php echo '<a class="nav-link" href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo '<i class="fas fa-home"></i> ' . HEADER_TITLE_CATALOG; ?></a>
      </li>
<?php } ?>
<?php if (zen_is_logged_in() && !zen_in_guest_checkout()) { ?>
      <li class="nav-item">
        <a class="nav-link" href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
      </li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
      <li class="nav-item">
        <a class="nav-link" href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo '<i class="fas fa-sign-in-alt"></i> ' . HEADER_TITLE_LOGIN; ?></a>
      </li>
<?php } } ?>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
      <li class="nav-item">
        <a class="nav-link" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
      </li>
<?php }?>

<?php require($template->get_template_dir('tpl_offcanvas_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_offcanvas_menu.php');?>

    </ul>
	

  </div>
<div>
  <?php require(DIR_WS_MODULES . zen_get_module_sidebox_directory('search_header.php')); ?>
</div>

  </nav>
</div>

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

<!--bof-branding display-->
<div id="logoWrapper">
   <div id="logo" class="row align-items-center p-3 d-none d-md-block"> 
   <?php if (HEADER_SALES_TEXT != '') {
           echo '<div class="col-sm-4">';
        } 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-center">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline" class="text-center"><?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-->

<?php
// Display all header alerts via messageStack:
if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
}
if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
    echo zen_output_string_protected(urldecode($_GET['error_message']));
}
if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
    echo zen_output_string_protected($_GET['info_message']);
}
?>
<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<br>

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' && zen_is_whitelisted_admin_ip())) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<!--bof-mega menu display-->
<?php require($template->get_template_dir('tpl_mega_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_mega_menu.php');?>
<!--eof-mega menu display-->
<div class="clearBoth"></div>
<?php } ?>

I am in no way a coder so i am not sure if it is the right way to do it

It seems to works so far ( no error logs :-) ) except for one thing:

When on mobile, the search icon somehow gets pulled inside the toggler when it is click on. Is there a way to fix it? please

Thank you

[nicksab]

While on mobile (small screen), the shopping cart table requires scrolling in order to see the "total" column.

If thesmall screenison landscape,the shopping cart table is displayed/seen in full. It seems to be too big for the small screen in portrait mode.

Is there away to fix it so there is no scrolling and the table is shown in full?

I looked at post #211 thru #218 which seems to be similar issue but the fix does not work for me. It is not android or iphone related i believe.

Thank you

[dbltoe]

Can you go to jeandretDOTcom and place an item in the shopping cart while in mobile to see if this matches your look? This is the latest bootstrap with a standard demo load.

Either that or give us a link we can look at?

[gsh68]

Can you go to jeandretDOTcom and place an item in the shopping cart while in mobile to see if this matches your look? This is the latest bootstrap with a standard demo load.

Either that or give us a link we can look at?

This is a known bug - I brought it up with lat9 when having my site upgraded.
It only happens when you have an item with attributes in the cart. It is the offset of the attributes causing it on small screens.
Tested on the above site with "TEST $120 Special $90" on my old Moto E4+
Attributes cause scrolling. Non attributes don't.
Same result using Chrome emulator on pc.

[nicksab]

Can you go to jeandretDOTcom and place an item in the shopping cart while in mobile to see if this matches your look? This is the latest bootstrap with a standard demo load.

Either that or give us a link we can look at?

I tried jeandretDOTcom and it is behaving the same way as my site. For reference, my site is royal-fleurDOTcom/upgrade.

I tried a few different thing on either site.

While in the shopping cart page:

- if the product has no attribute, the table (quantity/item name/price/total) is display is display within the "viewport"

-if the product has attributes, the colum total from the table gets push to the side like out of the "viewport"

Hope this makes and sorry for the lack of better words to describe it.

Picture from jeandret site :

No attributes on product



With both attribute and no attribute



Thank you for looking into this and helping me out

[dbltoe]

I'm going to have to defer to someone more familiar with the guts of bootstrap.

You should be able to use CSS to control the element's width with either a percentage, fit-content, or some other setting. None of them effect the .table-responsive except the removal of an overflow-x:auto and you only see that in products with attributes.

It is displayed in two different sizes when the item has or doesn't have attributes but I can't find what is controlling it.

360.4 x 274

360.4 x 202

[nicksab]

This is a known bug - I brought it up with lat9 when having my site upgraded.
It only happens when you have an item with attributes in the cart. It is the offset of the attributes causing it on small screens.
Tested on the above site with "TEST $120 Special $90" on my old Moto E4+
Attributes cause scrolling. Non attributes don't.
Same result using Chrome emulator on pc.

Thank you for the info. For once, it is not something i messed up :-)