forum

Home / DeveloperSection / Forums / Fixed search button top bar

Ask Question

Fixed search button top bar

Royce Roy268820-May-2013
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! 
facebook apifacebook api 
Updated on 20-May-2013
Royce Roy

Royce Roy

Follow

Can you answer this question?

Answer

1 Answers

AVADHESH PATEL

AVADHESH PATEL

20-May-2013
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.

Liked By