html - 手机导航栏不出现

Question

我有一个基本的移动导航栏，但它没有出现。它在那里，但只是没有出现在现场。当我查看检查元素时，我可以看到移动导航在那里，但它只是没有显示在实时站点上。

我已经用谷歌搜索了一个解决方案，我在这里搜索过，似乎没有任何帮助。

HTML

<span class="header-nav">
    <header ng-controller="Headerng-controller" mouseleave="hideHoverMenu()" class="scope" id="headerRoot">
        <div class="top">
            <a href="#" class="visible-xs visible-sm hamburger-menu-btn" ng-click="toggleMobileNav(scroll); $event.preventDefault(); $event.stopPropagation()"></a>

            <a href="index" class="logo logo-main bg-contain" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Main Logo"><h1>Galaxy Games</h1></a>

            <a href="index" class="logo logo-side bg-contain d_1x1" class="{white: $root.showSearch}" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Side Logo"><h1>Galaxy Games</h1></a>

        <nav role="navigation" aria-labelledby="main-nav" class="hidden-xxs hidden-xs hidden-sm">
            <a href="index" class="{active: section === &quot;home&quot;}" mouseover="hideHoverMenu()" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Home" id="active" style="">Home</a>

            <a href="games" class="{active: section === &quot;games&quot;}" mouseover="showHoverMenu('Games')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Games">Games</a>

            <a href="videos" class="{active: section === &quot;videos&quot;}" mouseover="showHoverMenu('Videos')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Videos" class="" style="">Videos</a>

            <a href="newswire" class="{active: section === &quot;newswire&quot;}" mouseover="showHoverMenu('Posts')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Newswire">Newswire</a>

            <a href="http://socialclub.galaxy-games.co.uk/" target="_blank" mouseover="showHoverMenu('ScItems')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Social Club">Social Club</a>

            <a href="downloads" ui-sref="downloads.index" class="{active: section === &quot;downloads&quot;}" mouseover="showHoverMenu('Downloads')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Downloads">Downloads</a>

            <a href="http://warehouse.galaxy-games.co.uk/" target="_blank" mouseover="showHoverMenu('WarehouseItems')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Warehouse">Warehouse</a>

            <a href="http://support.galaxy-games.co.uk" target="_blank" mouseover="showHoverMenu('SupportItems')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Support">Support</a>
                </div>
            </div>
        </nav>

CSS

header#headerRoot a{
    text-decoration:none !important
}
header#headerRoot .gl-wrapper{
    font-size:10px;
    position:absolute;
    z-index:75;
    right:15px;
    bottom:0
}
@media screen and (max-width:991px){
    header#headerRoot .gl-wrapper
    {
        bottom:auto;
        top:50%;
        transform:translateY(-50%)
    }
}
header#headerRoot>.top{
    width:100%;
    position:absolute;
    z-index:50;
    color:#fff
}
header#headerRoot>.top a.hamburger-menu-btn{
    background-image:url(../img/global/mobile-nav-sprite.png);
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}
header#headerRoot a {
    text-decoration: none!important;
}
@media (max-width: 767px){
    .visible-xs {
        display: block!important;
    }
}
.mobile-nav-shown #siteMobileNav {
    z-index: 10;
    position: relative;
    min-height: 100vh;
    transform: matrix(1,0,0,1,0,0);
}

#siteMobileNav {
    position: fixed;
    box-shadow: inset -10px 3px 17px -16px rgba(50,50,50,.71);
    padding: 5px 0;
    left: 0;
    width: 270px;
    background: #fff;
    color: #fff;
    min-height: 100%;
    transform: matrix(1,0,0,1,-270,0);
}
@media screen and (max-width:991px){
    header#headerRoot>.top
    {
        border-bottom:1px solid #000;
        height:70px
    }
    header#headerRoot>.top nav
    {
        margin:0
    }
}
header#headerRoot>.top a.logo.logo-side{
    width:36px;
    position:absolute;
    left:15px;
    padding-top:16px;
    z-index:100;
    transform:matrix(1,0,0,1,0,-175);
    transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-side{
    transform:matrix(1,0,0,1,0,-8)
}
@media screen and (max-width:991px){
    header#headerRoot>.top a.logo.logo-side
    {
        display:none;
    }
}
header#headerRoot>.top a.logo.logo-main{
    z-index:20;
    left:0;
    right:0;
    width:650px;
    height:75px;
    margin:20px auto;
    position:absolute;
    transform:matrix(1,0,0,1,0,0);
    transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-main{
    transform:matrix(.5,0,0,.5,0,-100)
}
@media screen and (max-width:991px){
    header#headerRoot>.top a.logo.logo-main
    {
        margin:0 auto;
        height:100%;
        padding:10px;
        transform:matrix(1,0,0,1,0,0) !important
    }
}
header#headerRoot>.top a.logo.white{
    background-position:50% !important
}
header#headerRoot>.bottom{
    z-index:20;
    position:absolute;
    width:100%;
    top:100%;
    margin-top:-1px;
    transform:translateY(-1px)
}
header#headerRoot nav{
    z-index:20;
    position:relative;
    max-width:1920px;
    margin:99px auto 0;
    padding:0 15px;
    transition:margin-top .3s cubic-bezier(.19,1,.22,1);
    font-size:1em;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
@media screen and (max-width:991px){
    header#headerRoot nav
    {
        font-size:.9em
    }
}
.header-collapsed header#headerRoot nav{
    margin-top:0
}
header#headerRoot nav a{
    display:inline-block;
    zoom:1;
    *display:inline;
    vertical-align:top;
    float:none !important;
    color:inherit;
    margin-right:20px;
    padding:15px 0;
    position:relative;
    outline:none;
    transition:all .2s
}
header#headerRoot nav a:lang(en_us){
    padding:15px 4px
}
@media screen and (max-width:991px){
    header#headerRoot nav a
    {
        margin-right:10px !important
    }
    header#headerRoot nav a:first-child
    {
        margin-left:-30px
    }
}
header#headerRoot nav a:before{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0;
    background:#ff0000;
    transition:height .15s linear
}
header#headerRoot nav a:hover{
    text-decoration:none;
    color:#fff
}
header#headerRoot nav a#active:before,header#headerRoot nav a:hover:before{
    height:3px
}
header#headerRoot nav .search{
    position:relative;
    display:inline-block;
    zoom:1;
    *display:inline;
    vertical-align:top;
    float:none !important;
    margin-top:15px
}
header#headerRoot nav .search span{
    cursor:pointer;
    position:relative;
    z-index:7
}
header#headerRoot nav .search .searchbox{
    pointer-events:none;
    position:fixed;
    z-index:6;
    top:99px;
    left:0;
    padding-top:7px;
    background:#000;
    text-align:center;
    opacity:0;
    width:100%;
    transform:translateZ(0);
    transition:top .3s cubic-bezier(.19,1,.22,1),opacity .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot nav .search .searchbox{
    top:0
}
header#headerRoot nav .search.shown span{
    text-shadow:none
}
header#headerRoot nav .search.shown span:before{
    color:#fff !important
}
header#headerRoot nav .search.shown .searchbox{
    pointer-events:auto;
    opacity:1
}
header#headerRoot section.hover-menu{
    background:#fff;
    border-top:1px solid #000;
    border-bottom:4px solid #000;
    width:100%;
    position:absolute;
    z-index:10;
    text-align:left;
    font-size:.9em
}

截图： https ://imgur.com/0PlRMIb

任何帮助表示赞赏并提前感谢。

标签： htmlcss

Answer 1

它只是color:inherit在 中header#headerRoot nav a，现在它是白色的，你看不到链接。因此，将其替换为您可以看到的某种颜色black：

header#headerRoot nav a{
    display:inline-block;
    zoom:1;
    *display:inline;
    vertical-align:top;
    float:none !important;
    color:inherit; // -> change it to black or ...
    margin-right:20px;
    padding:15px 0;
    position:relative;
    outline:none;
    transition:all .2s
}

我创建了一个片段来向您展示您应该做什么：

注意：在您的原始代码中，您应该注意一些未封闭的标签。

header#headerRoot a{
    text-decoration:none !important
}
header#headerRoot .gl-wrapper{
    font-size:10px;
    position:absolute;
    z-index:75;
    right:15px;
    bottom:0
}
@media screen and (max-width:991px){
    header#headerRoot .gl-wrapper
    {
        bottom:auto;
        top:50%;
        transform:translateY(-50%)
    }
}
header#headerRoot>.top{
    width:100%;
    position:absolute;
    z-index:50;
    color:#fff
}
header#headerRoot>.top a.hamburger-menu-btn{
    background-image:url(../img/global/mobile-nav-sprite.png);
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}
header#headerRoot a {
    text-decoration: none!important;
}
@media (max-width: 767px){
    .visible-xs {
        display: block!important;
    }
}
.mobile-nav-shown #siteMobileNav {
    z-index: 10;
    position: relative;
    min-height: 100vh;
    transform: matrix(1,0,0,1,0,0);
}

#siteMobileNav {
    position: fixed;
    box-shadow: inset -10px 3px 17px -16px rgba(50,50,50,.71);
    padding: 5px 0;
    left: 0;
    width: 270px;
    background: #fff;
    color: #fff;
    min-height: 100%;
    transform: matrix(1,0,0,1,-270,0);
}
@media screen and (max-width:991px){
    header#headerRoot>.top
    {
        border-bottom:1px solid #000;
        height:70px
    }
    header#headerRoot>.top nav
    {
        margin:0
    }
}
header#headerRoot>.top a.logo.logo-side{
    width:36px;
    position:absolute;
    left:15px;
    padding-top:16px;
    z-index:100;
    transform:matrix(1,0,0,1,0,-175);
    transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-side{
    transform:matrix(1,0,0,1,0,-8)
}
@media screen and (max-width:991px){
    header#headerRoot>.top a.logo.logo-side
    {
        display:none;
    }
}
header#headerRoot>.top a.logo.logo-main{
    z-index:20;
    left:0;
    right:0;
    width:650px;
    height:75px;
    margin:20px auto;
    position:absolute;
    transform:matrix(1,0,0,1,0,0);
    transition:transform .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot>.top a.logo.logo-main{
    transform:matrix(.5,0,0,.5,0,-100)
}
@media screen and (max-width:991px){
    header#headerRoot>.top a.logo.logo-main
    {
        margin:0 auto;
        height:100%;
        padding:10px;
        transform:matrix(1,0,0,1,0,0) !important
    }
}
header#headerRoot>.top a.logo.white{
    background-position:50% !important
}
header#headerRoot>.bottom{
    z-index:20;
    position:absolute;
    width:100%;
    top:100%;
    margin-top:-1px;
    transform:translateY(-1px)
}
header#headerRoot nav{
    z-index:20;
    position:relative;
    max-width:1920px;
    margin:99px auto 0;
    padding:0 15px;
    transition:margin-top .3s cubic-bezier(.19,1,.22,1);
    font-size:1em;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
@media screen and (max-width:991px){
    header#headerRoot nav
    {
        font-size:.9em
    }
}
.header-collapsed header#headerRoot nav{
    margin-top:0
}
header#headerRoot nav a{
    display:inline-block;
    zoom:1;
    *display:inline;
    vertical-align:top;
    float:none !important;
    color:black;
    margin-right:20px;
    padding:15px 0;
    position:relative;
    outline:none;
    transition:all .2s
}
header#headerRoot nav a:lang(en_us){
    padding:15px 4px
}
@media screen and (max-width:991px){
    header#headerRoot nav a
    {
        margin-right:10px !important
    }
    header#headerRoot nav a:first-child
    {
        margin-left:-30px
    }
}
header#headerRoot nav a:before{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0;
    background:#ff0000;
    transition:height .15s linear
}
header#headerRoot nav a:hover{
    text-decoration:none;
    color:#fff
}
header#headerRoot nav a#active:before,header#headerRoot nav a:hover:before{
    height:3px
}
header#headerRoot nav .search{
    position:relative;
    display:inline-block;
    zoom:1;
    *display:inline;
    vertical-align:top;
    float:none !important;
    margin-top:15px
}
header#headerRoot nav .search span{
    cursor:pointer;
    position:relative;
    z-index:7
}
header#headerRoot nav .search .searchbox{
    pointer-events:none;
    position:fixed;
    z-index:6;
    top:99px;
    left:0;
    padding-top:7px;
    background:#000;
    text-align:center;
    opacity:0;
    width:100%;
    transform:translateZ(0);
    transition:top .3s cubic-bezier(.19,1,.22,1),opacity .3s cubic-bezier(.19,1,.22,1)
}
.header-collapsed header#headerRoot nav .search .searchbox{
    top:0
}
header#headerRoot nav .search.shown span{
    text-shadow:none
}
header#headerRoot nav .search.shown span:before{
    color:#fff !important
}
header#headerRoot nav .search.shown .searchbox{
    pointer-events:auto;
    opacity:1
}
header#headerRoot section.hover-menu{
    background:#fff;
    border-top:1px solid #000;
    border-bottom:4px solid #000;
    width:100%;
    position:absolute;
    z-index:10;
    text-align:left;
    font-size:.9em
}

<span class="header-nav">
    <header ng-controller="Headerng-controller" mouseleave="hideHoverMenu()" class="scope" id="headerRoot">
        <div class="top">
            <a href="#" class="visible-xs visible-sm hamburger-menu-btn" ng-click="toggleMobileNav(scroll); $event.preventDefault(); $event.stopPropagation()"></a>

            <a href="index" class="logo logo-main bg-contain" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Main Logo"><h1>Galaxy Games</h1></a>

            <a href="index" class="logo logo-side bg-contain d_1x1" class="{white: $root.showSearch}" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Side Logo"><h1>Galaxy Games</h1></a>

        <nav role="navigation" aria-labelledby="main-nav" class="hidden-xxs hidden-xs hidden-sm">
            <a href="index" class="{active: section === &quot;home&quot;}" mouseover="hideHoverMenu()" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Home" id="active" style="">Home</a>

            <a href="games" class="{active: section === &quot;games&quot;}" mouseover="showHoverMenu('Games')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Games">Games</a>

            <a href="videos" class="{active: section === &quot;videos&quot;}" mouseover="showHoverMenu('Videos')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Videos" class="" style="">Videos</a>

            <a href="newswire" class="{active: section === &quot;newswire&quot;}" mouseover="showHoverMenu('Posts')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Newswire">Newswire</a>

            <a href="http://socialclub.galaxy-games.co.uk/" target="_blank" mouseover="showHoverMenu('ScItems')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Social Club">Social Club</a>

            <a href="downloads" ui-sref="downloads.index" class="{active: section === &quot;downloads&quot;}" mouseover="showHoverMenu('Downloads')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Downloads">Downloads</a>

            <a href="http://warehouse.galaxy-games.co.uk/" target="_blank" mouseover="showHoverMenu('WarehouseItems')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Warehouse">Warehouse</a>

            <a href="http://support.galaxy-games.co.uk" target="_blank" mouseover="showHoverMenu('SupportItems')" click="hideHoverMenu()" data-gtm-category="Mega Nav" data-gtm-action="Main Nav" data-gtm-label="Support">Support</a>
                </div>
            </div>
        </nav>