css - 在响应式设计中同时使用 Canvas 外和固定导航栏

Question

我正在尝试修复我的 UI-kit 导航栏，因此它会跟随滚动，但我的问题是，它现在与我的 Off-canvas 重叠(就像它具有更高的 z-index，但它没有' t).

有谁知道如何实现 Canvas 外位于具有固定位置(顶部)的导航栏顶部？

编辑#1

<nav id="mobileNav" class="tm-navbar uk-navbar uk-navbar-attached uk-hidden-large">
    <div class="uk-container uk-container-center">
        <a data-uk-offcanvas="{target:'#offcanvas-3'}" class="uk-navbar-toggle"></a>
        <a href="#cart" class="uk-navbar-cart pull-right">1.000,-</a>
        <div class="uk-navbar-brand uk-navbar-center"><img src="http://www.mammashop.dk/skin/frontend/default/ic_verticalmom_pink_dk/images/logo.gif" title="Mammashop.dk" alt="Mammashop.dk"></div>
    </div>
</nav>
<div id="offcanvas-3" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">

        <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
            <li><a href="">Item</a></li>
            <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><a href="">Item</a></li>

            <li class="uk-nav-header">Header</li>
            <li class="uk-parent"><a href=""><i class="uk-icon-star"></i> Parent</a></li>
            <li><a href=""><i class="uk-icon-twitter"></i> Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href=""><i class="uk-icon-rss"></i> Item</a></li>
        </ul>

    </div>
</div>

导航栏文档:http://getuikit.com/docs/navbar.html

Canvas 外文档:http://getuikit.com/docs/offcanvas.html

Answer 1

我的解决方案:

        <nav class="uk-navbar ">
            <a class="uk-navbar-brand uk-hidden-small" href="#">Isaac Udotong</a>

            <div class="uk-navbar-content uk-navbar-flip uk-hidden-small">
                <div class="uk-button-group">
                    <ul class="uk-navbar-nav uk-hidden-small">
                        <li class="">
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">News</a>
                        </li>
                        <li>
                            <a href="#">contact</a>
                        </li>       
                    </ul>
                </div>
            </div>


             <div class="uk-container uk-container-center">
                <a data-uk-offcanvas="{target:'#offcanvas-3'}" class="uk-navbar-toggle uk-visible-small"></a>
                <div class="uk-navbar-brand  uk-visible-small uk-hidden-large uk-hidden-medium">
             <img src="" title="Mammashop.dk" alt="Mammashop.dk"></div>

            </div>

        </nav>
         <div id="offcanvas-3" class="uk-offcanvas">
            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
                    <li><a href="">Item</a></li>
                    <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><a href="">Item</a></li>

                    <li class="uk-nav-header">Header</li>
                    <li class="uk-parent"><a href=""><i class="uk-icon-star"></i> Parent</a></li>
                    <li><a href=""><i class="uk-icon-twitter"></i> Item</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href=""><i class="uk-icon-rss"></i> Item</a></li>
                </ul>

            </div>
        </div>

Please Replace this code from your above code.

在这里，您可以在响应式设计中同时使用 Canvas 外和固定导航栏。