ZCA Bootstrap 4 Template [Support Thread]

Ive downloaded and installed this most recent version dated 12/17/20

running 1/5/7b and php7.3

Love the template, easily customizable.

I have a lengthy list of Categories and EZ Pages. Is it possible in the mobile version for either list to scroll?

PROBLEM: if I have more than 20 links in either list, it is not possible to view the entirety of either list.

Suggestions?

I added the following to stylesheet.css to allow the hamburger menu to scroll.

Code:

---

div#navbarSupportedContent {
        max-height:300px;
        overflow-y:auto;
}

---

Quote:

---

Originally Posted by dennisns7d

I added the following to stylesheet.css to allow the hamburger menu to scroll.

Code:

---

div#navbarSupportedContent {
    max-height:300px;
    overflow-y:auto;
}

---

---

A simple thing of beauty that is EXACTLY what I needed!
Thank You!

Im trying to Center the EZ header bars contents. The links currently show up aligned left.

I added this to the stylesheet on ZCA4, but no effect.... thoughts?

Code:

---

  /* header ezpage bar */
        div#ezpagesBarHeader {
            text-align:center;
        }
#ezpagesBarHeader {
    background-color: <?php echo ZCA_HEADER_EZPAGE_BACKGROUND_COLOR; ?>;
    }
#ezpagesBarHeader a.nav-link  {
    color: <?php echo ZCA_HEADER_EZPAGE_LINK_COLOR; ?>;
    }
#ezpagesBarHeader a.nav-link:hover  {
    color: <?php echo ZCA_HEADER_EZPAGE_LINK_COLOR_HOVER; ?>;
    }

---

Is the header currently turned on or on a different site from your sig? Would help to see.

I do see that your site comes up insecure from your sig. That tells me there's no 301 redirect to send all to HTTPS.

It also results in your sign-in possibly being sent insecure.

Your SSL states www. So, you might want to add the following to the root .htaccess

Code:

---

# Needed before any rewritingRewriteEngine On


### Built using the .htaccess 301 Redirect Generator from Web Site Advantage
### https://websiteadvantage.com.au/HtAccess-301-Redirect-Generator
### Place after 'RewriteEngine On' and before any CMS specific rewrite rules


# Redirect HTTP with www to HTTPS with www
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# Redirect HTTP without www to HTTPS with www
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule .* https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# Redirect HTTPS without www to HTTPS with www
RewriteCond %{HTTPS} on
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule .* https://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]


## 301 Redirects

---

Quote:

---

Originally Posted by Carbonless

Im trying to Center the EZ header bars contents. The links currently show up aligned left.

I added this to the stylesheet on ZCA4, but no effect.... thoughts?

Code:

---

  /* header ezpage bar */
        div#ezpagesBarHeader {
            text-align:center;
        }
#ezpagesBarHeader {
    background-color: <?php echo ZCA_HEADER_EZPAGE_BACKGROUND_COLOR; ?>;
    }
#ezpagesBarHeader a.nav-link  {
    color: <?php echo ZCA_HEADER_EZPAGE_LINK_COLOR; ?>;
    }
#ezpagesBarHeader a.nav-link:hover  {
    color: <?php echo ZCA_HEADER_EZPAGE_LINK_COLOR_HOVER; ?>;
    }

---

---

To get those centered, you'll need to edit your bootstrap clone's /templates/tpl_ezpages_bar_header.php, adding another class to the 'nav-pills' list:

Code:

---

?>
<?php if (!empty($var_linksList)) { ?>
<div id="ezpagesBarHeader" class="ezpagesBar rounded">
<ul class="nav nav-pills nav-justified">
<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <li class="nav-item"><a class="nav-link" href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a></li>
<?php } // end FOR loop ?>
</ul>
</div>
<?php } ?>

---

Quote:

---

Originally Posted by dbltoe

Is the header currently turned on or on a different site from your sig? Would help to see.

---

its a client site www.psdinnersready.com

Quote:

---

Originally Posted by lat9

To get those centered, you'll need to edit your bootstrap clone's /templates/tpl_ezpages_bar_header.php, adding another class to the 'nav-pills' list:

Code:

---

?>
<?php if (!empty($var_linksList)) { ?>
<div id="ezpagesBarHeader" class="ezpagesBar rounded">
<ul class="nav nav-pills nav-justified">
<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <li class="nav-item"><a class="nav-link" href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a></li>
<?php } // end FOR loop ?>
</ul>
</div>
<?php } ?>

---

---

PERFECT! I appreciate the quick response and that worked beautifully!

Quote:

---

Originally Posted by Carbonless

PERFECT! I appreciate the quick response and that worked beautifully!

---

That's the beauty of using a standards-based template!
There's documentation that identifies the various Bootstrap 4 styles (https://hackerthemes.com/bootstrap-cheatsheet/)
and there's also documentation (https://www.w3schools.com/bootstrap4/default.asp) that includes some "Try It" links
and the official Bootstrap docs (https://getbootstrap.com/docs/4.5/components/alerts/).

Quote:

---

Originally Posted by dennisns7d

I added the following to stylesheet.css to allow the hamburger menu to scroll.

Code:

---

div#navbarSupportedContent {
    max-height:300px;
    overflow-y:auto;
}

---

---

Quote:

---

Originally Posted by Carbonless

A simple thing of beauty that is EXACTLY what I needed!
Thank You!

---

FYI as pointed out elsewhere by dennisns7d there may be issues for landscape.
Changing max-height to 90vh helps the "one" change work better for both portrait and landscape: See: https://github.com/lat9/ZCA-Bootstra.../pull/15/files