Я работаю над редизайном для сайта, который использует WHMCS для своего контента. Основной сайт использует Bootstrap 4, но поскольку WHMCS использует Bootstrap 3 для своих шаблонов, я начал перекодировать вещи для этого.
Все работает хорошо, кроме навигации - когда в мобильном представлении, когда навигация развернута, вместо того, чтобы толкать содержимое страницы, как это должно быть, она просто «смешивается» с содержимым, охватывающим ее. Я не уверен, что я что-то не так делаю или несовместимость WHMCS / Smarty с кодом Bootstrap.
Данный сайт находится здесь: http://vertimystsolutions.com/clients/?systpl=VsAqua3
Это мой 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}
И мой 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;
}