Home > DeveloperSection > Forums > Fixed search button top bar
Royce Roy
Royce Roy

Total Post:134

Points:938
Posted on    May-20-2013 1:06 AM

 Facebook API Facebook API 
Ratings:


 1 Reply(s)
 1132  View(s)
Rate this:
Hi Guys!

I'm trying to make a fixed top bar with a search button, facebook login, etc... The bar is fine, the problem is, the search button is moving along the page when it 

changes the resolution, I want it fixed like the facebook login bar, so it doesn't matter if you change the resolution, all the buttons have to move with the top bar, 

.fixbar {
width: 100%;
position: fixed;
left: 0px;
top: 0px;
height: 30px;
background-image: url(../img/fixbar.png);
background-repeat: repeat-x;
z-index: 1;
bottom: 0px;
}


#search {
position: fixed;
left: 396px;
top: 0px;
width: 100%;
height: 22px;
z-index: 2;
}

what do I have to do? 
Thanks. in advance! 


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    May-20-2013 8:49 AM

Hi Royce!

You need to set position:fixed .fixbar class and then u need to set position:absolute to the #search id.

CSS

.fixbar {
    width: 100%;
    height:30px;
    position: fixed;
    left: 0px;
    top: 0px;
    right:0 height: 30px;
    background: red;
    z-index: 1;
}
#search {
    position: absolute;
    right:20px;
    top: 0px;
    width: 30px;
    height: 22px;
    z-index: 2;
    background:blue;

}

HTML

<div class="fixbar">
    <div id="search"></div>
</div>

It may be helpful for you.

Don't want to miss updates? Please click the below button!

Follow MindStick