固定主导航栏不规则展开

Question

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

我注意到我的三行导航图标 ("fa fa-bars") 也有一个问题，它不在栏的中间所以我使用我的浏览器检查功能并发现容器框 ( "indzign-box") 放错地方了。

是不是那个容器框导致我的导航栏不规则展开或其他原因，如何解决？

/* 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}

<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>

提前致谢！

Answer 1

这个问题的原因是 .fixednav li.indzign-box

的填充属性

只需将填充从 padding:18.5px 20px; 更改为 padding:8px 20px;

固定主导航栏不规则展开

Irregular expansion of fixed main navigation bar

css

blogger

navbar