nav.html

<header class="uk-background-primary uk-light">
    <div class="uk-container uk-container-center">
        <nav class="uk-navbar-transparent" data-uk-navbar>
            <div class="uk-navbar-left">
                <a class="uk-navbar-item uk-logo uk-padding-remove-left uk-padding-remove-right" href="/">
                    <img class="uk-padding-remove-right" src="/img/logo/logo_web.png" style="height: 70px; max-width: 100%;">
                </a>
                <div style="display: flex; overflow:auto; text-align:center; flex-direction:column; height:100%; padding-top:5px; margin-left: 0px;" class="uk-navbar-item" >
                    <div>
                        <a href="https://sacm.cs.wisc.edu/" target="_blank">
                        <img src="/img/sacm_logo_inverse.jpg" style="height: 35px; max-width: 100%;">
                        </a>
                    </div>
                    <div>
                        <a href="https://wacm.cs.wisc.edu/" target="_blank">
                        <img src="/img/wacm_logo.png" style="height: 35px; max-width: 100%;">
                        </a>
                    </div>
                </div>
                
            </div>
            <div class="uk-navbar-center uk-visible@l" style="padding-left:0px;">
                <ul class="uk-navbar-nav nav-ul">
                    <li class="uk-text-bold nav-home">
                        <a href="/">Home</a>
                    </li>
                    <li class=" uk-text-bold nav-program">
                        <a href="/program.html">Program</a>
                    </li>
                    <li class=" uk-text-bold nav-submission">
                        <a href="/submission.html">Submission</a>
                    </li>
                    <li class=" uk-text-bold nav-prize">
                        <a href="/prize.html">Prize</a>
                    </li>
                    <li class=" uk-text-bold nav-organizers">
                        <a href="/organizers.html">Organizers</a>
                    </li>
                </ul>
            </div>
            <div class="uk-navbar-right">
                <ul class="uk-navbar-nav">
                    <li class="uk-hidden@l">
                        <a class="uk-navbar-toggle" data-uk-toggle data-uk-navbar-toggle-icon href="#offcanvas-nav"></a>
                    </li>
                </ul>
            </div>
        </nav>
</div>
</header>

<!-- OFFCANVAS -->
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
        <button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close></button>
        <ul class="uk-nav uk-nav-default nav-ul">
            <!--<li class="uk-nav-header">Header</li>-->
            <li class=" uk-active  uk-text-bold nav-home">
                <a href="/"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: home"></span>Home</a>
            </li>
            <li class=" uk-text-bold nav-program">
                <a href="/program.html"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: info"></span>Program</a>
            </li>
            <li class=" uk-text-bold nav-submission">
                <a href="/submission.html"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: folder"></span>Submission</a>
            </li>
            <li class=" uk-text-bold nav-prize">
                <a href="/prize.html"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: file-edit"></span>Prize</a>
            </li>
            <li class=" uk-text-bold nav-organizers">
                <a href="/organizers.html"><span class="uk-margin-small-right uk-icon" data-uk-icon="icon: users"></span>Organizers</a>
            </li>
        </ul>
    </div>
</div>