使用修复位置将我的导航保持在最顶层

时间:2013-12-28 20:15:40

标签: css navigation position fixed nav

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

#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%为我的网站工作的解决方案。

1 个答案:

答案 0 :(得分:0)

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

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