Используйте как холст, так и фиксированный navbar в адаптивном дизайне

Я пытаюсь исправить панель навигации UI-kit, чтобы она следовала за прокруткой, но моя проблема в том, что теперь она перекрывает мой холст (как будто у него более высокий z-индекс, но у него нет).

Кто-нибудь знает, как этого добиться, чтобы холст находился сверху панели навигации с фиксированной позицией (вверху)?

РЕДАКТИРОВАТЬ #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>

Документация Navbar: http://getuikit.com/docs/navbar.html

Документация вне холста: http://getuikit.com/docs/offcanvas.html

Источник

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>

Пожалуйста, замените этот код из вашего кода выше.

Здесь вы можете использовать как холст, так и фиксированную панель навигации в адаптивном дизайне.

Источник
Другие вопросы по тегам