Sorry for the delayed response - been battling the flu. That line is already in there. Here is the mainnav file contents:
div class="horizontal-nav">
<div class="h-nav-top order-3 order-xl-1">
<span class="d-none d-collapse">
<jdoc:include type="element" name="megamenu-toggle" />
</span>
<jdoc:include type="element" name="offcanvas-toggle" />
</div>
<div class="h-nav-middle order-2 order-xl-2">
<jdoc:include type="modules" name="slogan" style="raw" />
</div>
<div class="h-nav-bottom order-1 order-xl-3">
<jdoc:include type="modules" name="social" style="raw" />
</div>
</div>
<!-- HEADER BLOCK -->
<header class="header-block header-default w-100">
<div class="header-wrap row d-flex align-items-center collapse-static t4-nav-height g-0 flex-nowrap justify-content-between">
<div class="col-6 col-lg-3 col-xl-3 d-flex justify-content-start">
<jdoc:include type="element" name="logo" data-home="index.php" />
</div>
<div class="t4-navbar col-1 col-lg-6 col-xl-6 d-flex justify-content-center collapse-static">
<jdoc:include type="element" name="megamenu" />
</div>
<div class="t4-header-r col-5 col-lg-3 col-xl-3 d-flex align-items-center justify-content-end">
<span class="header-r">
<jdoc:include type="modules" name="header-r" style="raw" />
</span>
</div>
</div>
</header>
<!-- // HEADER BLOCK -->
And here is the content added to custom.css
.horizontal-nav {
display: none;
}
@media (min-width: 1199.98px) {
.t4-content {
padding: 0;
max-width: 100%;
}
}
@media (max-width: 1199.98px) {
.navbar-expand-lg .navbar-toggler {
display: block !important;
}
}
.t4-megamenu .dropdown-menu {
background: #1a2e37;
}
@media (max-width: 576px){
.t4-offcanvas .t4-off-canvas-body:has(.mod-menu-flex) {
padding-top: 7rem !important;
}
}
@media (min-width: 577px){
.layout-default .horizontal-nav {display: none;}
}