I want to make my topmenu stay on fixed position. I know i have to use position:fixed property but it doesnt work. Seems like after i put position:fixed top:0 on id topmenu it's overlapping with my below content. here i put my code here is my site desawisataserang.com
HTML
<div id="topmenu">
<ul class="menu">
<li class="item-464 active"></li></ul>
<div id="search">
<div class="search">
</div>
</div>
</div>
CSS
#topmenu {
margin: auto;
width: 1000px;
padding-left: 0px;
font-family: :"Segoe UI", "Segoe WP", "Helvetica Neue", 'RobotoRegular', sans-serif; font-weight: 400;
font-size: 1.2em;
color: #fff;
background-color: #c02929;
overflow: auto;
}
#topmenu ul {
float: left;
padding: 18px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0;
list-style: none;
background-color: #c02929;
}
#topmenu a {
display: block;
color: #fff;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 24px;
padding-right: 24px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-decoration:none;
text-transform: uppercase;
}
#topmenu a:hover {
color: #000;
text-decoration: none;
display:block;
background-color:#525252;
}
#topmenu li {
float: left;
}
#topmenu li:first-child {
border-left: 0px solid #000000;
}
When you give position: fixed
the element rendering isn't considered when rendering other elements on the page. You have to give padding-top
for your body, so that it doesn't overlap with the header.
For your site example, try these:
#topmenu {
position: fixed;
width: 1000px;
z-index: 100;
overflow: none;
left: 50%;
margin-left: -500px;
}
Add padding-top:
to body. padding top value will be height
of you top menu
Css:
body {
padding-top: 50px;
}
#wrapper {
display: block;
padding: 0;
min-width: 1000px;
text-align: center;
width: 100%;
position: fixed;
top: 0;
z-index:9999;
}
#topmenu {
margin: 0 auto;
width: 1000px;
padding-left: 0px;
font-family: :"Segoe UI", "Segoe WP", "Helvetica Neue", 'RobotoRegular', sans-serif; font-weight: 400;
font-size: 1.2em;
color: #fff;
background-color: #c02929;
overflow: auto;
}
Html:
<div id="wrapper">
<div id="topmenu">
<ul class="menu">
<li class="item-464 active"></li></ul>
<div id="search">
<div class="search">
</div>
</div>
</div>
</div
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.