Question

基本上，导航栏工作正常，当用户滚动时，它会静止地停留在屏幕顶部。当它是纯文本时，一切正常。当我想添加Twitter和Facebook图标时，我可以简单地这样做，它会起作用。但是，只要我添加<a href="#">来封闭图像，它就会完全中断。有时，导航栏甚至可以使用图像链接，但是大约90％的时间它会失败，导航栏将不会出现，即使Inspect Element显示它应该被加载，也不会显示任何内容。

相关：

使用HTML

<div class="" id="header">
    <ul class="menu">
        <li class="menu-item first"><a href="gallery.mywebsite.ca">Gallery</a></li>
        <li class="menu-item second"><a href="charity.mywebsite.ca">Charity</a></li>        
        <li class="menu-item third"><a href="about.mywebsite.ca">About Me</a></li>
        <li class="menu-item fourth"><a href="contact.mywebsite.ca">Contact</a></li>
        <li class="menu-item media"><img src="TaiwanSite_files/twitter.png" height="25">
        &emsp;
        <img src="TaiwanSite_files/fb.png" height="25"></li>

        <li class="menu-top">
            <a href="#intro"><img src="TaiwanSite_files/top-arrow.svg" height="61" width="61"></a>
        </li>

    </ul>
</div>

HTML破解

<div class="" id="header">
    <ul class="menu">
        <li class="menu-item first"><a href="gallery.mywebsite.ca">Gallery</a></li>
        <li class="menu-item second"><a href="charity.mywebsite.ca">Charity</a></li>        
        <li class="menu-item third"><a href="about.mywebsite.ca">About Me</a></li>
        <li class="menu-item fourth"><a href="contact.mywebsite.ca">Contact</a></li>
        <li class="menu-item media"><a href="https://twitter.com/#"><img src="TaiwanSite_files/twitter.png" height="25"></a>
        &emsp;
        <a href="https://facebook.com/#"><img src="TaiwanSite_files/fb.png" height="25"></a></li>

        <li class="menu-top">
            <a href="#intro"><img src="TaiwanSite_files/top-arrow.svg" height="61" width="61"></a>
        </li>

    </ul>
</div>

相关的CSS：

.menu {
padding:0;margin:0 auto;position:relative;max-width:1024px;height:2.4em;padding-left:62px;padding-right:62px
}
.menu:after {
display:block;content:"";clear:both
}
.menu-logo {
position:absolute;top:.18em;left:0;right:0;text-align:center;z-index:-1
}
.menu-logo img {
width:4.8em;margin:0;padding:0
}
.menu-item {
display:block;float:left;min-width:20%;text-align:right;height:1.2em;margin-top:.58em
}
.menu-item.first {
text-align:left
}
.menu-item.second {
text-align:left
}
.menu-item.third {
text-align:left
}
.menu-item.fourth {
text-align:left
}
.menu-item.media {
float:right;text-align:right
}
.menu-item a {
text-decoration:inherit;font-family:inherit;color:inherit;font-weight:inherit;line-height:inherit;display:none
}

如果此时我可以提供任何其他信息，请通知我，我会尽力这样做。非常感谢您的时间和帮助。

Answer 1

为您的a代码添加特殊课程（在本例中为on）：

<a class="on" href="https://twitter.com/">
<img src="TaiwanSite_files/twitter.png" height="25"></a>

<a class="on" href="https://facebook.com/">
<img src="TaiwanSite_files/fb.png" height="25"></a>

然后将其添加到您的样式中：

.on {
    display: inline-block !important;
}

要并排显示图像，或者这样：

.on {
    display: block !important;
}

图像是一个在另一个上面。

这应该有所帮助。

使用图像链接时标题导航栏消失

1 个答案: