css - 使用固定位置将我的导航保持在顶部

Question

我在使用顶部导航栏的固定定位时遇到问题。我已经删除了我尝试过的代码并将其恢复正常所以也许有人可以看到为什么我在尝试修复位置时遇到这些格式问题。

#main-header {
/*background:url(images/house.jpg) no-repeat center top;*/
height:734px;
border-bottom:10px solid #162b4b;
}

.epicFullscreen {max-height:735px !important}
.epicFullscreen img {min-height:735px !important}


#top-bar {background: #162b4b; height:60px; margin-top:-98px; margin-bottom:70px}
#top-bar nav {padding-left:260px; padding-top:10px; color:#9297a2; width:75%; float:left}
#top-bar nav a {color:#9297a2; margin-right:30px; text-decoration:none}
#phone {float:right; color:white; padding-top:5px; position:relative; right:90px; top:-15px}
#phone a span {font-size:30px; font-weight:bold; color:#93da04; !important; cursor: default}
#phone > span {font-size:18px; font-weight:bold; color:#white; !important; cursor: default}
a[href^=tell] {color:inherit}
#logo {
width:233px;
height:98px;
background:white;
position:relative;
-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.7);
box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.7);
display:block;
cursor:pointer;
}
#logo img {position:absolute; top:10px; left:30px}

固定位置时，它会带走我位于导航文本下方的顶部蓝色条，并将导航文本固定到顶部并搞砸我的电话号码格式(这是一个动态电话号码将测试目的与调用跟踪指标和分析分开)。我可以让它随着页面滚动，但除了格式错误之外，当我滚动时，它会在我滚动时位于页面上某些对象和文本的下方，而不是全部。

任何见解都将不胜感激，我已经通读了其他人围绕此问题提出的一些问题并且答案很接近，但我还没有找到对我的网站 100% 有效的解决方案。

Answer 1

这对我有用，我假设您的主标题 div 包含您的导航栏。

#main-header{
    height:734px;
    top: 0px;
    position: fixed;
    border-bottom:10px solid #162b4b;
}