<div class="uk-section uk-height-viewport uk-flex uk-flex-middle">
    <div class="uk-container">

        <style>
            .test {
                display: block;
                position: relative;
                z-index: 1;
                width: 100%;
                margin-left: 0;
            }
        </style>

        <div uk-grid>
            <div class="uk-width-2-3@m">

                <div class="uk-position-relative">

                    <canvas width="1000" height="200" class="uk-background"></canvas>
                    <div class="uk-position-top">

                        <nav id="navbar-toggle-1" class="uk-navbar uk-navbar-container uk-margin uk-hidden@m">
                            <div class="uk-navbar-left">
                                <a class="uk-navbar-item uk-logo" href="#">Default</a>
                            </div>
                            <div class="uk-navbar-right">
                                <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
                            </div>
                        </nav>

                        <nav id="test-navbar" class="uk-navbar-container uk-visible@m" uk-navbar="dropbar: true">
                            <div class="uk-navbar-left">

                                <a class="uk-navbar-item uk-logo" href="#">Default</a>

                                <ul class="uk-navbar-nav">
                                    <li><a href="#">
                                        <div>
                                            Item <div class="uk-navbar-subtitle">Subtitle</div>
                                        </div>
                                    </a></li>
                                    <li class="uk-active"><a href="#">Active</a></li>
                                    <li>
                                        <a href="#">Parent</a>
                                        <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2 uk-visible@m">
                                            <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                                                <div>
                                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                                        <li class="uk-active"><a href="#">Active</a></li>
                                                        <li class="uk-parent">
                                                            <a href="#">Parent</a>
                                                            <ul class="uk-nav-sub">
                                                                <li><a href="#">Sub item</a></li>
                                                                <li><a href="#">Sub item</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="uk-nav-header">Header</li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                                        <li class="uk-nav-divider"></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                                    </ul>
                                                </div>
                                                <div>
                                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                                        <li class="uk-active"><a href="#">Active</a></li>
                                                        <li class="uk-parent">
                                                            <a href="#">Parent</a>
                                                            <ul class="uk-nav-sub">
                                                                <li><a href="#">Sub item</a></li>
                                                                <li><a href="#">Sub item</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="uk-nav-header">Header</li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                                        <li class="uk-nav-divider"></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li><a href="#">Item</a></li>
                                </ul>

                            </div>

                            <div class="uk-navbar-right">
                                <div>
                                    <a class="uk-navbar-toggle" href="#">
                                        <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
                                    </a>
                                </div>
                            </div>
                        </nav>

                    </div>

                </div>

                <div class="uk-position-relative uk-light uk-margin">
                    <canvas width="1000" height="200" class="uk-background-primary"></canvas>
                    <div class="uk-position-top">

                        <nav id="navbar-toggle-1" class="uk-navbar uk-navbar-container uk-margin uk-hidden@m">
                            <div class="uk-navbar-left">
                                <a class="uk-navbar-item uk-logo" href="#">Light</a>
                            </div>
                            <div class="uk-navbar-right">
                                <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
                            </div>
                        </nav>

                        <nav id="test-navbar-transparent-light" class="uk-navbar-container uk-navbar-transparent uk-visible@m" uk-navbar="dropbar: true">
                            <div class="uk-navbar-left">

                                <a class="uk-navbar-item uk-logo" href="#">Light</a>

                                <ul class="uk-navbar-nav">
                                    <li><a href="#">
                                        <div>
                                            Item <div class="uk-navbar-subtitle">Subtitle</div>
                                        </div>
                                    </a></li>
                                    <li class="uk-active"><a href="#">Active</a></li>
                                    <li>
                                        <a href="#">Parent</a>
                                        <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2 uk-visible@m">
                                            <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                                                <div>
                                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                                        <li class="uk-active"><a href="#">Active</a></li>
                                                        <li class="uk-parent">
                                                            <a href="#">Parent</a>
                                                            <ul class="uk-nav-sub">
                                                                <li><a href="#">Sub item</a></li>
                                                                <li><a href="#">Sub item</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="uk-nav-header">Header</li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                                        <li class="uk-nav-divider"></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                                    </ul>
                                                </div>
                                                <div>
                                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                                        <li class="uk-active"><a href="#">Active</a></li>
                                                        <li class="uk-parent">
                                                            <a href="#">Parent</a>
                                                            <ul class="uk-nav-sub">
                                                                <li><a href="#">Sub item</a></li>
                                                                <li><a href="#">Sub item</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="uk-nav-header">Header</li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                                        <li class="uk-nav-divider"></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li><a href="#">Item</a></li>
                                </ul>

                            </div>

                            <div class="uk-navbar-right">
                                <div>
                                    <a class="uk-navbar-toggle" href="#">
                                        <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
                                    </a>
                                </div>
                            </div>
                        </nav>

                    </div>
                </div>

                <div class="uk-position-relative uk-dark">
                    <canvas width="1000" height="200" class="uk-background-muted"></canvas>
                    <div class="uk-position-top">

                        <nav id="navbar-toggle-1" class="uk-navbar uk-navbar-container uk-margin uk-hidden@m">
                            <div class="uk-navbar-left">
                                <a class="uk-navbar-item uk-logo" href="#">Dark</a>
                            </div>
                            <div class="uk-navbar-right">
                                <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
                            </div>
                        </nav>

                        <nav id="test-navbar-transparent-dark" class="uk-navbar-container  uk-navbar-transparent uk-visible@m" uk-navbar="dropbar: true">
                            <div class="uk-navbar-left">

                                <a class="uk-navbar-item uk-logo" href="#">Dark</a>

                                <ul class="uk-navbar-nav">
                                    <li><a href="#">
                                        <div>
                                            Item <div class="uk-navbar-subtitle">Subtitle</div>
                                        </div>
                                    </a></li>
                                    <li class="uk-active"><a href="#">Active</a></li>
                                    <li>
                                        <a href="#">Parent</a>
                                        <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2 uk-visible@m">
                                            <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                                                <div>
                                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                                        <li class="uk-active"><a href="#">Active</a></li>
                                                        <li class="uk-parent">
                                                            <a href="#">Parent</a>
                                                            <ul class="uk-nav-sub">
                                                                <li><a href="#">Sub item</a></li>
                                                                <li><a href="#">Sub item</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="uk-nav-header">Header</li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                                        <li class="uk-nav-divider"></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                                    </ul>
                                                </div>
                                                <div>
                                                    <ul class="uk-nav uk-navbar-dropdown-nav">
                                                        <li class="uk-active"><a href="#">Active</a></li>
                                                        <li class="uk-parent">
                                                            <a href="#">Parent</a>
                                                            <ul class="uk-nav-sub">
                                                                <li><a href="#">Sub item</a></li>
                                                                <li><a href="#">Sub item</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="uk-nav-header">Header</li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                                                        <li class="uk-nav-divider"></li>
                                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li><a href="#">Item</a></li>
                                </ul>

                            </div>

                            <div class="uk-navbar-right">
                                <div>
                                    <a class="uk-navbar-toggle" href="#">
                                        <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
                                    </a>
                                </div>
                            </div>
                        </nav>

                    </div>
                </div>

            </div>
            <div class="uk-width-1-3@m">

                <div class="uk-navbar-dropdown test">

                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a>
                                    <ul>
                                        <li><a href="#">Sub item</a></li>
                                        <li><a href="#">Sub item</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                                <li><a href="#">Sub item</a></li>
                            </ul>
                        </li>
                        <li class="uk-nav-header">Header</li>
                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
                    </ul>

                </div>

            </div>
        </div>

    </div>
</div>
