固定主导航栏的不规则扩展

Question

我没有太多的编码经验，但最终我设法在Blogger中创建了一个博客。经过几次自定义尝试后，我的主导航栏出现了问题。问题是，除非您位于页面顶部，否则滚动条会扩展并覆盖下面的帖子，这非常烦人。

[我注意到我的三行导航图标（“ fa fa-bars”）也出现问题，不在导航条中间，因此我使用浏览器检查功能，发现容器盒（“ indzign -box“）放错了位置。

Illustration picture

是不是集装箱箱引起导航栏或其他物体的不规则膨胀，以及如何解决？

> HTML：]

<nav class='fixnavbar'>
  <button class='nav-icon-position nav-icon' type='button'>
    <span class='icon-line'/>
    <span class='icon-line'/>
    <span class='icon-line'/>
  </button>
  <ul class='fixednav' id='togglemenu'>
    <li><a href='/'>Home</a></li>
        <li class='indzign-box' onclick='document.getElementById(&apos;indzignbox&apos;).style.top=&apos;60px&apos;;document.getElementById(&apos;count-box&apos;).style.display=&apos;none&apos;;'><i class='fa fa-bars'/></li>
    <li><a href='/search/label/list'>List bài viết</a></li>
    <li><a href='/search/label/kinh-nghiem'>Kinh nghiệm</a></li>
    <li><a href='/search/label/review'>Gundam Reviews</a></li>                        
  </ul>
</nav>

> CSS：]

/* Main Navigation */
nav.fixnavbar{position:relative;display:block;width:100%;background:#778595;z-index:99;padding:0;margin-bottom:0;font-size:0;opacity:1;}
.fixednav{position:relative;margin:0 auto;padding:0;max-width:1010px}
.fixednav li{display:inline-block;}
.fixednav li a{display:inline-block;padding:20px;color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;}
.fixednav li a:hover{background:#6c7a89;color:#fff}
.nav-icon{display:none}
nav.fixnavbar.main-nav-scrolled{position:fixed;top:0;left:0;opacity:.97;-webkit-transform:translateZ(0);transform:translateZ(0)}

/* Box Info */
.fixednav li.indzign-box{color:rgba(255,255,255,1);z-index:2;font:normal 24px FontAwesome;cursor:pointer;float:right;display:inline-block;padding:18.5px 20px;transition:all 0.5s ease-out}
.icon-box{background-color:rgba(66,133,244,0.8);padding:8px 13px;border-radius:100%;color:rgba(255,255,255,0.5);margin-right:5px}
.icon-box:hover{color:white;background-color:rgba(66,133,244,1)}
.notif-info{background-color:rgba(245,245,245,0.5);border:1px solid #eee;padding:5px 8px;margin-bottom:10px;cursor:pointer;text-align:left}
.notif-info:hover{opacity:0.8}
.notif-info p{font-size:11px;color:#555;margin:0;margin-top:-5px;padding-left:40px}
#indzignbox{background:#fff;color:#333;font-size:13px;top:-381px;right:306px;padding:20px;position:fixed;width:320px;box-shadow:0 1px 5px rgba(0,0,0,.1);z-index:100;transition:all .5s}
#indzignbox .closebox{background:none;color:#999;padding:4px 6px}

谢谢您！

Answer 1

只需将padding:18.5px 20px;中的padding:8px 20px;更改为.fixednav li.indzign-box