I'm working on a redesign for a site that uses WHMCS for some of its content. The main site uses Bootstrap 4, but since WHMCS uses Bootstrap 3 for its templates, I started re-coding things for that.
Everything is working okay except for the nav - when in mobile view, when the nav is expanded, instead of pushing the page content down like it should, it just 'mixes in' with the content covering it. I'm not sure if it's something I'm doing wrong, or if it's a WHMCS/Smarty incompatibility with the Bootstrap code.
The site in question is here: http://vertimystsolutions.com/clients/?systpl=VsAqua3
This is my header.tpl:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="http://vertimystsolutions.com/v3/images/favicon-192.png">
<!-- Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="http://vertimystsolutions.com/v3/styles/vs_aqua_bs3.css">
<script src="https://kit.fontawesome.com/9cf0b2704e.js" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
{include file="$template/includes/head.tpl"}
{$headoutput}
<title>{if $kbarticle.title}{$kbarticle.title} - {/if}{$pagetitle} - {$companyname}</title>
</head>
<body>
{$headeroutput}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseNav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://vertimystsolutions.com/v3/images/v3_logo_295_56.png" alt="Vertimyst Solutions"></a>
</div>
<div class="collapse navbar-collapse" id="collapseNav">
<ul class="nav navbar-nav">
<li><a href="http://vertimystsolutions.com/v3/index.php">Home</a></li>
<li><a href="http://vertimystsolutions.com/v3/services.php">Services</a></li>
<li><a href="http://vertimystsolutions.com/clients/cart.php">Register</a></li>
<li><a href="http://vertimystsolutions.com/clients/submitticket.php">Support</a></li>
<li><a href="http://vertimystsolutions.com/v3/contact.php">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="http://vertimystsolutions.com/v3/about.php">About</a></li>
</ul>
</div><!-- /.collapse /.navbar-collapse-->
</div><!-- /.container-fluid-->
</nav>
<main>
{if $templatefile == 'homepage'}
<section id="home-banner">
<div class="container text-center">
{if $registerdomainenabled || $transferdomainenabled}
<h2>{$LANG.homebegin}</h2>
<form method="post" action="domainchecker.php">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="domain" placeholder="{$LANG.exampledomain}" autocapitalize="none" />
<span class="input-group-btn">
{if $registerdomainenabled}
<input type="submit" class="btn search" value="{$LANG.search}" />
{/if}
{if $transferdomainenabled}
<input type="submit" name="transfer" class="btn transfer" value="{$LANG.domainstransfer}" />
{/if}
</span>
</div>
</div>
</div>
{include file="$template/includes/captcha.tpl"}
</form>
{else}
<h2>{$LANG.doToday}</h2>
{/if}
</div>
</section>
<div class="home-shortcuts">
<div class="container">
<div class="row">
<div class="col-md-4 hidden-sm hidden-xs text-center">
<p class="lead">
{$LANG.howcanwehelp}
</p>
</div>
<div class="col-sm-12 col-md-8">
<ul>
{if $registerdomainenabled || $transferdomainenabled}
<li>
<a id="btnBuyADomain" href="domainchecker.php">
<i class="fas fa-globe"></i>
<p>
{$LANG.buyadomain} <span>»</span>
</p>
</a>
</li>
{/if}
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="far fa-hdd"></i>
<p>
{$LANG.orderhosting} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnMakePayment" href="clientarea.php">
<i class="fas fa-credit-card"></i>
<p>
{$LANG.makepayment} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnGetSupport" href="submitticket.php">
<i class="far fa-envelope"></i>
<p>
{$LANG.getsupport} <span>»</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
{/if}
{include file="$template/includes/verifyemail.tpl"}
<section id="main-body">
<div class="container{if $skipMainBodyContainer}-fluid without-padding{/if}">
<div class="row">
{if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren())}
{if $primarySidebar->hasChildren() && !$skipMainBodyContainer}
<div class="col-md-9 pull-md-right">
{include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
</div>
{/if}
<div class="col-md-3 pull-md-left sidebar">
{include file="$template/includes/sidebar.tpl" sidebar=$primarySidebar}
</div>
{/if}
<!-- Container for main page display content -->
<div class="{if !$inShoppingCart && ($primarySidebar->hasChildren() || $secondarySidebar->hasChildren())}col-md-9 pull-md-right{else}col-xs-12{/if} main-content">
{if !$primarySidebar->hasChildren() && !$showingLoginPage && !$inShoppingCart && $templatefile != 'homepage'&& !$skipMainBodyContainer}
{include file="$template/includes/pageheader.tpl" title=$displayTitle desc=$tagline showbreadcrumb=true}
{/if}
And my css:
/* this css is for bootstrap 3 + whmcs */
html {
position: relative;
min-height: 100%;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main-body {
background-color: #f8f8f8!important;
}
#home-banner {
background-color: #f8f8f8!important;
}
#home-banner h2, p {
color: #232323;
}
div.header-lined h1 {
color: #232323!important;
font-family: 'Open Sans Light', sans-serif!important;
}
.lead {
color: #f8f8f8;
}
main {
flex: 1;
}
.navbar-default { /* Bootstrap 3 */
/*height: auto;*/
color: #f8f8f8;
border-color: #f8f8f8!important;
}
.navbar-brand { /* Bootstrap 3 */
/*height: 86px;*/
padding-bottom: 30px;
}
.navbar-default .navbar-nav { /* Bootstrap 3 */
font-family: 'Open Sans Light', sans-serif!important;
font-size: 1.4em!important;
padding-left: 25px;
padding-right: 25px;
padding-top: 25px;
padding-bottom: 25px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { /*bootstrap 3 */
color: #2da1c3!important;
}
.footer {
background-color: #232323;
font-family: 'Open Sans Light', sans-serif;
font-size: 1.0em;
color: #8f8f8f;
}
.footer a{
font-family: 'Open Sans Light', sans-serif;
font-size: 1.0em;
text-decoration: none;
color:#8f8f8f;
}
.footer a:hover{
font-family: 'Open Sans Light', sans-serif;
font-size: 1.0em;
text-decoration: none;
color:#2da1c3;
}