[英]make header menu a fixed position(theme tesseract)
I am trying to make the header menu ontop of the tesseract theme ( http://tyler.com/ ) a fixed position , so that if you scroll down one can access all menu elements from any postion on the site. 我正在尝试将tesseract主题( http://tyler.com/ )上方的标题菜单固定在一个位置 ,这样,如果您向下滚动,就可以访问网站上任何位置的所有菜单元素。
I have tried a few things and always added position:fixed;
我已经尝试了几件事,并且总是添加position:fixed;
to a few css classes of the theme, but nothing happened. 到主题的几个CSS类,但是什么也没发生。
I would be glad, if you could help me out with this issue. 如果您能在这个问题上帮助我,我会很高兴。 Thanks in advance 提前致谢
Edit this code from position: relative
to position: fixed
从position: relative
对于position: fixed
编辑此代码
.home .site-header.no-header-image {
left: auto;
position: fixed;
top: auto;
}
Now to avoid the top content getting hidden: 现在,避免隐藏最重要的内容:
.home .site-content {
padding-top: 60px;
}
Output 产量
You could try: 您可以尝试:
.<youClassName>{
position: absolute;
top: 0px;
}
This should fix your menu to the top and it will follow you on scrolling. 这应该将菜单固定在顶部,并且将跟随您进行滚动。
remove position: relative;
除去position: relative;
add 加
.home .site-header.no-header-image {
position: fixed;
}
Add position fixed to a div not in every element 将位置固定在div上,而不是每个元素
HTML HTML
<div id = "menu">
<ul class = "main">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div id = "content">
CONTENT CONTENT
</div>
CSS CSS
div#menu {
position: fixed;
background-color: #0088cc;
color: #f8f8f8;
width: 100%;
height: 50px;
}
ul li {
float: left;
margin: 2%;
list-style: none;
cursor: pointer;
}
#content {
height: 1000px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.