FIXED SEARCH BUTTON TOP BAR

Royce Roy

Total Post:149

Points:1043
Posted by  Royce Roy
 1426  View(s)
Ratings:
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! 
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Fixed search button top bar

    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.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!