Question

编辑：想通了 - .sticky .logo-black { display: block; }导致此问题可以解释为什么？

整个粘性导航栏是可点击的，因为徽标为黑色，问题是什么？

如果我删除了href，那么问题就解决了，但是我需要href来将徽标链接到主页。

HTML

     <!DOCTYPE html>
<html lang="en">
   <head>
    <title>Blog</title>
    <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400" rel="stylesheet">
       <link rel="stylesheet" type="text/css" href="css/style.css">

       </head>
    <body>
        <div id="outer-background">
        <div class="container inner-background">
            <header>
                <nav class="sticky">
                    <a href="http://yahoo.com"><img src="css/img/logo-sticky.png" class="logo-black" alt="logo black"></a>
                    <ul class="main-nav js--main-nav">
                        <li><a href="http://google.com">Home</a></li>
                        <li><a href="#">Add A Post</a></li>
                        <li><a href="#">Login</a></li>
                        <li><a href="#">Register</a></li>
                    </ul>

                </nav>
                <h1 class="ion-android-share-alt"> Share Content</h1>
            </header>
            </div>
        </div>
    </body>
</html>

下面是CSS。我有两个导航主要和粘性主导航工作正常。我已将代码格式化为仅在此代码中显示粘性导航。粘性导航使整个导航栏可单击。

/************** HEADER ***************/

.logo-black {
    height: 70px;
    width: auto;
    margin: 10px 0 0 30px;

}

/***************** MAIN NAV *****************/


.main-nav {
    float: right;
    list-style: none;
    margin-top: 15px;
    margin-right: 26px;
}

.main-nav li {
    display: inline-block;
    margin-right: 22px;
}

.main-nav li:last-child {
    margin-right: 0;
}

.main-nav li a {
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(19, 109, 128);
    word-spacing: 2px;
    font-size: 81%;
    font-weight: 400;
}

/*********** STICKY NAV **************/

    .sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);  
    box-shadow: 0 2px 2px rgba(25, 147, 177, 0.31);
    z-index: 9999;
}

.sticky .main-nav { margin-top: -50px; margin-bottom: 32px;}


.sticky .logo-black { display: block; }

Answer 1

尝试将css更改为 .sticky一个{ display：inline-block; } .sticky .main-nav { margin-top：29px; }

Answer 2

/************** HEADER ***************/
.logo-black {
height: 70px;
width: auto;
margin: 10px 0 0 30px;

}
/***************** MAIN NAV *****************/
.main-nav {
float: right;
list-style: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}

.main-nav li {
display: inline-block;
margin-right: 22px;
}

.main-nav li:last-child {
margin-right: 0;
}

.main-nav li a {
text-decoration: none;
text-transform: uppercase;
color: rgb(19, 109, 128);
word-spacing: 2px;
font-size: 81%;
font-weight: 400;
}

/*********** STICKY NAV **************/

.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);  
box-shadow: 0 2px 2px rgba(25, 147, 177, 0.31);
z-index: 9999;
}

.sticky .logo-black { display: inline-block; }

<div id="outer-background">
    <div class="container inner-background">
        <header>
            <nav class="sticky">
                <a href="http://yahoo.com"><img src="css/img/logo-sticky.png" class="logo-black" alt="logo black"></a>
                <ul class="main-nav js--main-nav">
                    <li><a href="http://google.com">Home</a></li>
                    <li><a href="#">Add A Post</a></li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Register</a></li>
                </ul>
            </nav>
            <h1 class="ion-android-share-alt"> Share Content</h1>
        </header>
    </div>
</div>

由于此徽标，可以点击整个粘性导航如何解决此问题？

2 个答案: