Hi,
How do I make the mainnav block position auto flexible for all screen sizes?
I believe I might have overlooked something in the header column settings for mainnav.
Below is the code I'm using now for the mainnav block (logo + 6 menu columns + header-r + offcanvas), the header is configured as fluid.
<!-- HEADER BLOCK -->
<header class="header-block header-default w-100">
<div class="container-fluid">
<div class="header-wrap row d-flex align-items-center collapse-static t4-nav-height">
<div class="col-6 col-lg-2 col-xxl-3">
<jdoc:include type="element" name="logo" data-home="index.php" />
</div>
<div class="t4-navbar col-1 col-lg-8 col-xxl-6 d-flex justify-content-center collapse-static">
<jdoc:include type="element" name="megamenu" />
</div>
<div class="t4-header-r col-5 col-lg-2 col-xxl-3 d-flex align-items-center justify-content-end">
<jdoc:include type="element" name="megamenu-toggle" />
<span class="d-none d-lg-flex">
<jdoc:include type="modules" name="header-r" style="raw" />
</span>
<jdoc:include type="element" name="offcanvas-toggle" />
</div>
</div>
</div>
</header>
<!-- // HEADER BLOCK -->
However, it appears distorted only on Safari browsers. Could you please advise me on how to fix it?"
This is how it looks life when safari browser in normal or full screen mood
This is how it appears when reducing safari browser size to 2/3
Regards,