在Wordpress中Bootstrap 4 Navbar折叠

时间:2017-11-30 21:00:58

标签: wordpress bootstrap-4

所以,我正在为客户建立一个网站,并遇到了这个奇怪的问题。我正在使用Bootstrap来构建响应能力并使用Wordpress来管理内容。一切都工作得很好,除了我遇到的一个问题,我无法找到解决方案。

我有一个在较小的视口尺寸处折叠的nabber和一个切换开关,在点击时从汉堡包变为“X”。菜单在打开时表现良好,从左侧滑入并覆盖所有内容。但是当我点击关闭按钮时,菜单向左滑动,但随后将收到“show”类并立即再次打开。

我构建了一个Codepen,它使用与Wordpress网站相同的HTML和CSS,但剥离了骨架。它工作正常。所以我认为Wordpress有一些干扰,并在菜单关闭后添加“show”类。

https://codepen.io/j_lyman/pen/EbGPPB/

<header>
<nav class="navbar navbar-light navbar-expand-lg bg-white justify-content-between">
    <div class="container">
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#main-navigation" aria-controls="main-navigation" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            <span class="close hidden">X</span>
        </button>

        <a class="navbar-brand" href="index.html">
            <div class="logo-container">
                <img src="http://jlr-wp.lymannuthouse.com/wp-content/themes/jlr_twentyeighteen/img/JLR_logo@2x.png" class="logo">
            </div>
        </a>
        <div class="collapse navbar-collapse" id="main-navigation">
            <ul class="navbar-nav ml-auto">
                <li id="menu-home" class="nav-item current-menu-item"><a class="nav-link" href="index.html">Home</a></li>
                <li id="menu-program" class="nav-item"><a class="nav-link" href="program.html">Program</a></li>
                <li id="menu-portfolio" class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
                <li id="menu-newsroom" class="nav-item"><a class="nav-link" href="news.html">Newsroom</a></li>
                <li id="menu-blog" class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
            </ul>
        </div>
    </div>
</nav>
</header>

我的意思是:

header {
margin-bottom: 0;
max-height: 81px;

.logo-container {
    margin-top: -5px;
    padding: 0;
    text-align: center;

    img {
        width: 120px;
    }
}
.logo {
    //border: 1px solid red;
}
}

/* --------------- MAIN NAVIGATION ---------------*/
.navbar {
padding-top: 0;
padding-bottom: 0;

.navbar-toggler {
    border: none;

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#FF6600' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;

    }
}

.navbar-collapse {
    margin-top: -5px;
    position: relative;
    z-index: 100;
    //background: @white;
}
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-nav {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
        padding: 0 2rem;
        height: 100%;
        font-family: 'Proxima Nova', sans-serif;
        font-weight: normal;
        border-left: 1px solid @ltGray;

        a {
            padding: 2rem 0;
            display: block;
            height: 100%;
            font-size: 15px;
            border-bottom: none;
        }
        &.current-menu-item {
            a {
                font-family: 'Proxima Nova Bold', sans-serif;
                box-shadow: inset 0 -3px 0 @secondary;
            }
        }
        &:first-child {
            border-left: none;
        }
    }
}
}
@media (max-width: 991px) {
.navbar {
    .navbar-collapse {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: @dkGray;

        .nav-item {
            border-left: none;
            .nav-link {
                font-family: 'Proxima Nova Light Thin', sans-serif;
                color: @white;
            }
            &.current-menu-item {
                background: lighten(@dkGray, 10%);
                .nav-link {
                    box-shadow: none;
                }
            }
        }
    }
    .navbar-toggler {
        &:focus {
            outline: none;
        }
        .close {
            font-weight: bold;
            color: @secondary;
        }
        &.collapsed {
            display: inline;

            .close {
                display: none;
            }
        }
        &:not(.collapsed) {
            .close {
                display: inline;
            }
            .navbar-toggler-icon {
                display: none;
            }
        }
    }
}
.navbar-collapse.collapsing {
    height: auto;
    -webkit-transition: left 0.3s ease;
    -o-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
    transition: left 0.3s ease;
    left: -100%;
}
.navbar-collapse.show {
    left: 0;
    -webkit-transition: left 0.3s ease-out;
    -o-transition: left 0.3s ease-out;
    -moz-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
}
}

我的WP网站位于此临时位置:

https://jlr-wp.lymannuthouse.com

如果有人在我感谢任何帮助之前已经看到过这种行为,因为我在网上找不到解决这一特定问题的任何内容。

0 个答案:

没有答案